Блог

Почему имя 2 не изменено и не реагирует? Что случилось? Как я могу сделать его реактивным, чтобы при изменении свойств объекта менялся и DOM? Когда я удаляю Имя 2, ничего не происходит

 <template>

  <div>
    <div v-for="(item, index) in items" v-bind:key="item.id">
      <p>{{item.name}}</p>
    </div>    
    <button v-on:click="deleteItem">
      Delete Name 2
    </button>
  </div>
</template>

<script>
export default {
  data:function(){
    return {
      items:[
        {
          id: 1,
          name: "Name 1"
        },
        {
          id: 2,
          name: "Name 2"
        }
      ]
    }
  },
  methods: {
    deleteItem: function(){
        this.items[1] = [];
        console.log(this.items);
        alert("DELETED");
      }
  },
  created: function(){
    let self = this;
    setTimeout(function(){
      self.items[1] = [];
    }, 2000);
  }
};
</script>
  

реактивность в vue (2) немного сложнее, эта ссылка объясняет вам, как решить эту проблемуhttps://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays

Измените свою функцию удаления элемента. Не устанавливайте его в пустой массив. Фильтруйте массив следующим образом:

Ваша HTML-разметка :

 <button @click="deleteItem(2)">
  Delete Name 2
</button>
  

Отправьте идентификатор элемента, который вы хотите удалить, в DeleteItem() в качестве аргумента.

  deleteItem: function(itemId){
    let filtered = this.items.filter((each) => {
      return each.id !== itemId;
    })
    this.items = filtered; //Finally mutate the items[] in data
  }
  

На самом деле вы присваиваете пустой массив элементу с индексом 1, вместо того чтобы удалять его. Если вы хотите удалить элемент с индексом 1, просто используйте splice(), и Vue автоматически отреагирует на это:

 this.items.splice(1, 1); // The first 1 is the index
  

Или, в качестве альтернативы, используйте Vue.delete(), который изначально предназначен для удаления свойств из объекта, но также может удалять элементы из массивов:

 Vue.delete(this.items, 1); // 1 is the index
  

Дополнительная информация:https://v2.vuejs.org/v2/api/#Vue-delete