Vuejs и Vue.set (), обновите массив

Я плохо знаком с Vuejs. Сделанный чем-то, но я не знаю, что это - простое / правильный путь.

что я хочу

Я хочу некоторые даты в массиве и обновляю их на событии. Сначала я попробовал Vue.set, но он dind't удается. Теперь после изменения моего объекта массива:

this.items[index] = val;
this.items.push();

Я ничего не продвигаю () к массиву, и он обновит.. Но иногда последний объект будет скрыт, так или иначе... Я думаю, что этим решением является немного hacky, как я могу сделать это стабильным?

Простой код здесь:

new Vue({
  el: '#app',
  data: {
  	f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
    	console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);
  		this.items[index] = val;
      this.items.push();
      console.log("arr length:  " + this.items.length);
    }
  }
})
ul {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>
62
задан 15 March 2017 в 14:02

2 ответа

VueJS не может погрузка Ваши изменения в состоянии при управлении массивами как это.

, Как объяснено в Общие Глюки Новичка , необходимо использовать методы массива как нажатие, соединение встык или безотносительно и никогда не изменять индексы как это a[2] = 2, ни .length свойство массива.

new Vue({
  el: '#app',
  data: {
  	f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
    	console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);


	  this.items.$set(index, val)
      console.log("arr length:  " + this.items.length);
    }
  }
})
ul {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>
32
ответ дан 31 October 2019 в 13:56

ОТРЕДАКТИРУЙТЕ 2

  • Для [1 114] весь объектные изменения, для которых нужно использование реактивности Vue.set(object, prop, value)
  • Для мутаций массива, можно посмотреть на в настоящее время поддерживаемый список здесь
<час>

РЕДАКТИРОВАНИЕ 1

Для vuex, который Вы захотите сделать Vue.set(state.object, key, value)

<час>

Оригинал

Поэтому только для других, которые приходят к этому вопросу. Это появляется в какой-то момент в Vue 2.* они удалили this.items.$set(index, val) в пользу this.$set(this.items, index, val).

Соединение встык все еще доступно и здесь является ссылкой для выстраивания методов мутации, доступных в ссылке vue .

88
ответ дан 31 October 2019 в 13:56

Другие вопросы по тегам:

Похожие вопросы: