尝试拼接对象的最后一个元素时出现Vue2错误答案

【问题标题】：Vue2 error when trying to splice last element of object尝试拼接对象的最后一个元素时出现Vue2错误
【发布时间】：2017-01-19 11:18:29
【问题描述】：

我有一个 Vue2 应用程序，其中包含我可以选择和显示或删除的项目列表。

当删除列表中的最后一个元素（并且只有最后一个）时 - 我收到 Vue 警告 - “[Vue warn]: Error when rendering root instance:”

我的 HTML：

<body >
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" v-on:click = "selectItem(index)" >
        <a>{{ item.name }}</a>
        <div v-on:click="deleteItem(index)">X</div>
      </li>
    </ul>
    <div>
     <span>{{selectedItem.name}}</span>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>

JS：

var app = new Vue({
      el: '#app',
      data: {
        index: 0,
        selectedItem: {},
        list : [
            { id: 1, name: 'org1', desc: "description1"},
            { id: 2, name: 'org2', desc: "description2"},
            { id: 3, name: 'org3', desc: "description3"},
            { id: 4, name: 'org4', desc: "description4"}
        ]

      },

      methods: {
        deleteItem: function(index) {
           this.list.splice(index,1);
        },
        selectItem: function(index) {
            this.selectedItem = this.list[index];
       },
      }
    })

您能否告知为什么会发生这种情况以及如何解决这个问题？

【问题讨论】：

这个<span>{{selectedItem.name}}</span>有什么用？

标签： javascript vue.js vuejs2

【解决方案1】：

问题正在发生，因为您将selectItem 绑定在li 级别，因此当您单击十字按钮时，selectItem 被执行并且相同的项目也被删除，从而导致此错误。

解决此问题的一种方法可以将 selectItem 绑定移动到 li 中，如下所示

  <li v-for="(item, index) in list">
    <a v-on:click = "selectItem(index)" >{{ item.name }}</a>
    <div v-on:click="deleteItem(index)">X</div>
  </li>

查看工作fiddle。

另一种方法是在您的 HTML 中打印 selectedItem.name 时，您设置一个空值检查 selectedItem 是否存在，如下所示：

 <span>{{selectedItem && selectedItem.name}}</span>

请参阅工作fiddle。

【讨论】：