Изменить свойство с помощью vue .set () не работает - PullRequest
Новая
       16

Изменить свойство с помощью vue .set () не работает

1 голос
/ 09 марта 2020

Простой счетчик с кнопками увеличения, уменьшения, сброса и списком исторических значений. c значения счетчика: https://codepen.io/Olivier_Tvx/pen/JjdyBMO

Я хочу, чтобы resetCounter () очистить всю предыдущую историю . Я не уверен, как правильно это сделать. Я пытаюсь изменить свойство visible на значение false и отфильтровать его в представлении, но безуспешно.

Я получаю сообщение об ошибке: "[Vue warn]: невозможно установить реактивное свойство на неопределенное, ноль , или примитивное значение: undefined "

Что я делаю не так? Нужно ли здесь vue .set?

JS

new Vue({
  el: '#app',
  data () {
                return {
                  historics: [{
                      value: '',
            visible: true,
                }],
        timer: 1000,
                counter: 0,
            }
        },
  methods: {
    increaseCounter() { // Increase
      clearTimeout(this.timer);
      this.counter++;
      this.timer = setTimeout(() => { this.pushToHistorics() }, 1000)
    },
    decreaseCounter() { // Decrease
      clearTimeout(this.timer);
      this.counter--;
      this.timer = setTimeout(() => { this.pushToHistorics() }, 1000),
        console.log(this.historics)
    }, 
    resetCounter() { // Reset
      this.counter = 0;
      for (historic in this.historics) {
         Vue.set(this.historic, 'visible', false);
       };
      // for (historic in this.historics) {
      // this.historic.push({visible: false});  
      // };
    },
    pushToHistorics() {
    this.historics.push({
      value: this.counter,
      visible: true,
    })
    }
  },
  computed: {
  }
});

HTML

<div class="flex-container align-center">
  <div id="app">
    <button @click="increaseCounter()" class="button rounded shadow success">
      Increase
    </button>
    <button @click="decreaseCounter()" class="button rounded shadow warning">
      Decrease
    </button>
    <button @click="resetCounter" class="button rounded shadow alert">
      Reset
    </button>
    <p class="text-center">
      Counter: {{ counter }} <br>
    </p>
    <ul>
    <li v-for="historic in historics.slice(0, 10)" v-if="historic.visible == true"> {{ historic.value }} - {{ historic.visible }}</li>
    </ul>
  </div>
</div>

1 Ответ

1 голос
/ 09 марта 2020

Вы можете обновить свойство visible для каждого historic, а затем использовать Vue.set() для его замены в текущем массиве. 

resetCounter() {
    this.counter = 0;
    this.historics.forEach((historic, idx) => {
        historic.visible = false;
        Vue.set(this.historics, idx, historic);
    });
}

Или, если вы хотите полностью очистить массив historics , вы можете просто установить его в пустой массив: 

resetCounter() {
    this.counter = 0;
    this.historics = [];
}
...