Vue.set не обновляет объект

Question

вот фрагмент кода

<div id="app">
  <div v-for="(value, key) in data">
    {{value.value}} {{value.newData}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      data: {
        'key1': {
          value: true
        },
        'key2': {
          value: false
        }
      }
    }
  },
  mounted: function () {
    setTimeout(() => {
      var ch = Object.assign(this.data.key1, {newData: 'text'})
      Vue.set(this.data, 'key1', ch)
    }, 3000);
  }
})
</script>

Я ожидаю увидеть

true text
false

Но DOM никогда не обновлялся.Это работает, если я обновляю уже существующие свойства, такие как value.

Как я могу обновить DOM и добавить новый ключ в существующий объект в Vue?

Спасибо.

---

Как заметил @thanksd, Vue.set(this.data.key1, 'newData', 'text') работает.Во время тестирования этого подхода я заметил, если размещение кода Object.assign(this.data.key1, {newData: 'text'}) перед Vue.set нарушит логику.Это выглядит немного странно, по крайней мере, для меня, но я надеюсь, что это поможет.

Answer 1

Vue.set используется как обходной путь для факта, что Vue не обнаруживает, когда свойство добавлено к объекту.Итак, похоже, у вас правильная идея: что свойство newData изначально не существует в объекте this.data.key1, и вам нужно будет использовать Vue.set, чтобы добавить свойство и сделать его реактивным.

В вашем коде Vue.set(this.data, 'key1', ch) говорит, установите свойство key1 для this.data в ch и сделайте его реактивным, чтобы Vue мог отслеживать его.Однако, поскольку значение ch - это просто объект this.data.key1 с новым свойством newData, Vue все еще не знает, что это свойство добавляется к объекту.

То, что вы хотите сделать, этоустановите значение свойства newData на this.data.key1, поэтому вам нужно сделать это следующим образом:

Vue.set(this.data.key1, 'newData', 'text');

---

Вот рабочий пример:

new Vue({
  el: '#app',
  data() {
    return {
      data: {
        'key1': {
          value: true
        },
        'key2': {
          value: false
        }
      }
    }
  },
  mounted() {
    setTimeout(() => {
      Vue.set(this.data.key1, 'newData', 'text')
    }, 3000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="(value, key) in data">
    {{value.value}} {{value.newData}}
  </div>
</div>