Vue2錯誤試圖對象

的最後一個元素拼接時，我有一個Vue2應用機智，我可以選擇和展示，或刪除的項目清單。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]; 
     }, 
     } 
    })

能否請您指教，爲什麼會發生這種情況，如何解決這個問題呢？

來源

2017-01-19 Reg

什麼用的這個' {{selectedItem.name}}'？ – itzmukeshy7

問題在發生，因爲您有selectItem綁定在li級別，所以事件當您單擊十字按鈕時，selectItem被執行並且相同的項目也被刪除，導致此錯誤。

一種方式來解決這個問題是可以移動selectItem如下

<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內li結合。在你的HTML打印selectedItem.name時

另一個方法就可以了，你把一個空檢查，selectedItem是否存在不喜歡以下內容：

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

見工作fiddle。

來源

2017-01-19 11:27:31 Saurabh

謝謝！解決了這個問題:) – Reg

Vue2錯誤試圖對象

回答

相關問題