Javascript 尝试拼接对象的最后一个元素时发生Vue2错误_Javascript_Vue.js_Vuejs2

Javascript 尝试拼接对象的最后一个元素时发生Vue2错误

javascript vue.js vuejs2

Javascript 尝试拼接对象的最后一个元素时发生Vue2错误,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我有一个Vue2应用程序，它有一个项目列表，我可以选择、显示或删除这些项目删除列表中的最后一个元素（并且仅删除最后一个元素）时，我会收到Vue warn-“[Vue warn]：呈现根实例时出错：” 我的HTML： <body > <div id="app"> <ul> <li v-for="(item, index) in list" v-on:click = "selectItem(index)" >

我有一个Vue2应用程序，它有一个项目列表，我可以选择、显示或删除这些项目

删除列表中的最后一个元素（并且仅删除最后一个元素）时，我会收到Vue warn-“[Vue warn]：呈现根实例时出错：”

我的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>

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

这个问题发生的原因是您在

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>

请参阅工作。
当您在
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>

请参阅工作。
此
{{selectedItem.name}}
的用途是什么？此
{{selectedItem.name}}
的用途是什么？
<span>{{selectedItem && selectedItem.name}}</span>