🖥️FE🖥️

this.displayInfo[0].UPDATE_DATE=this.currentTime()

들눈 2023. 11. 24. 13:45

If you're encountering an issue when adding `this.displayInfo[0].UPDATE_DATE=this.currentTime()` and seeing that something is wrong, there could be a few reasons for that. Let's troubleshoot:

1. **Reactivity System:** Vue.js relies on a reactivity system to track changes in data and update the DOM accordingly. If you're directly modifying a property like `this.displayInfo[0].UPDATE_DATE`, Vue might not pick up on the change.

    Instead, try using the Vue.set method to ensure reactivity:

    ```javascript
    this.$set(this.displayInfo[0], 'UPDATE_DATE', this.currentTime());
    ```

2. **Immutable Update:** Vue's reactivity system works best when you update data immutably. Instead of modifying the existing object directly, create a new object with the updated value. This helps Vue detect the change properly.

    ```javascript
    this.displayInfo = [{ ...this.displayInfo[0], UPDATE_DATE: this.currentTime() }];
    ```

    This creates a new array with a new object, updating only the `UPDATE_DATE` property.

3. **Watcher Usage:** Ensure that your watcher is working correctly. The `momentInfo` watcher should be triggered when `momentInfo` changes, updating `displayInfo`.

Here's how you can modify your `logValue` method incorporating these suggestions:

```javascript
logValue() {
  // Use Vue.set for reactivity
  this.$set(this.displayInfo[0], 'UPDATE_DATE', this.currentTime());

  // Or use immutable update
  // this.displayInfo = [{ ...this.displayInfo[0], UPDATE_DATE: this.currentTime() }];

  console.log(this.displayInfo[0]);
},
```

If you continue to face issues, check your browser console for any error messages. They can provide more information about what might be going wrong. Additionally, ensure that other parts of your code are not conflicting or interfering with the reactivity system.