Как я могу заставить Vue.js реагировать на изменения динамически добавляемых свойств массива? - PullRequest
Новая
       54

Как я могу заставить Vue.js реагировать на изменения динамически добавляемых свойств массива?

1 голос
/ 17 мая 2019

В Vue.js у меня есть объект данных с динамически добавляемыми / редактируемыми свойствами, которые сами являются массивами.Например, свойство начинается следующим образом: 

data: function () {
    return {
        vals: {}
    };
}

И со временем, с помощью различных нажатий кнопок и т. Д., vals может выглядеть следующим образом (с фактическими именами и значениями свойств, равными 100%динамический, основанный на ряде факторов): 

vals: {
    set1: [
        {
            prop1: 123,
            prop2: 'hello'
        },
        {
            prop1: 456,
            prop2: 'bye'
        }
    ],
    set2: [
        {
            prop3: 'Why?!',
            prop4: false
        }
    ]
}

По мере изменения свойств массива (т. е. set1 и set2) я хочу иметь возможность реагировать на эти изменения.

Например, я могу сделать что-то вроде следующего в моем коде: 

var prop = 'set1';

this.vals[prop].push({
    {
        prop1: 789,
        prop2: 'hmmm...'
    }
});

Однако, когда я делаю это, компонент не обновляется (я предполагаю, потому что я помещаю объект в конецподмассива объекта, и Vue.js, похоже, не отслеживает эти изменения).

Я смог заставить компонент реагировать, выполнив this.$forceUpdate(); после вышеуказанного push,но я думаю, что должен быть более красноречивый способ заставить Vue.js быть реактивным, когда дело доходит до объектов, помещаемых в конец подмассивов объектов.

Кто-нибудь знает лучший способ попробовать сделатьчто я пытаюсь достичье?Спасибо.

Ответы [ 2 ]

2 голосов
/ 17 мая 2019

Каждый раз, когда вы добавляете новое свойство к объекту или изменяете значение в массиве, вам необходимо использовать Vue.set(). 

Vue.set(this.vals, prop, [ /* ... */ ])

В идеале вам следуетОпределите все свои свойства заранее, чтобы Vue не пришлось делать недействительными вычисленные свойства в зависимости от формы вашей модели данных.Даже если они установлены на null, вы должны попытаться отобразить все свойства, которые, как ожидается, понадобятся вашему компоненту.

Кроме того, в вашем первом блоке кода после вашего return: стоит двоеточие, котороебудет соответствовать метке, что означает, что ваша функция данных ничего не возвращает.

0 голосов
/ 17 мая 2019

Вы можете попробовать что-то подобное, используя lodash и deep watcher ..

Подробнее о deep watcher здесь 

new Vue({
  el: "#app",
  methods: {
    setValue() {
      this.oldPeople = _.cloneDeep(this.people);
    }
  },
  mounted() {
    this.setValue();
  },
  el: "#app",
  data: {
    changed: null,
    people: [
      { id: 0, name: "Bob", age: 27 },
      { id: 1, name: "Frank", age: 32 },
      { id: 2, name: "Joe", age: 38 }
    ],
    oldPeople: []
  },
  watch: {
    people: {
      deep: true,
      handler(after, before) {
        // Return the object that changed
        let vm = this;
        let changed = after.filter(function(p, idx) {
          return Object.keys(p).some(function(prop) {
            return p[prop] !== vm.oldPeople[idx][prop];
          });
        });
        vm.setValue();
        this.changed = changed;
      },      
    }
  }
});
input {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>

<div id="app">
  <div>
    <input type="text" v-for="(person, index) in people" v-model="people[index].age" />
    <div v-if="changed !== null">
      You changed:<br/>{{ changed }}
    </div>
  </div>
</div>
...