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

Question

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

当删除列表中的最后一个元素（并且只有最后一个）时 - 我收到 Vue 警告 - “[Vue 警告]：呈现根实例时出错：“

我的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];
       },
      }
    })

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

Answer 1

当您在 li 级别绑定 selectItem 时出现问题，因此当您单击交叉按钮时，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。

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

Vue2 error when trying to splice last element of object

javascript

vue.js

vuejs2