Vuejs DOM Not Updating

Question

我在這裏設置了一個簡單的編輯屏幕，當我點擊保存或取消時，我不知道爲什麼它不隱藏表單。

窗體正在循環中顯示一個簡單的指令selected.name == p.name。當我取消選定的對象時，它不更新DOM。

表單內容將保存到數組中，您可以看到是否進行了一些更改，單擊保存，然後單擊一個新行。但表單不會隱藏取消或保存。

希望它的東西很簡單，我俯瞰。

感謝

var vm = new Vue({ 
 
    el: '#vue-instance', 
 
    data: { 
 
    selected: { 
 
    \t name:'', 
 
    \t price: 0 
 
    }, 
 
    products: [ 
 
     {name: 'Hamburger', price: 3.00}, 
 
     {name: 'Taco', price: 1.00}, 
 
     {name: 'Soda', price: 1.40}, 
 
     {name: 'French Fries', price: 2.00} 
 
    ] 
 
    }, 
 
    methods: { 
 
     save: function(index){ 
 
      this.products[index] = this.selected; 
 
      this.selected = { 
 
       name:'', 
 
       price: 0 
 
    \t }; 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script> 
 
<div id="vue-instance"> 
 
    <ul> 
 
    <li v-for="p, i in products" @click="selected = p"> 
 
     <span v-show="!selected || selected.name !== p.name"> 
 
     {{ p.name }}: ${{ p.price }} 
 
     </span> 
 
     <span v-show="selected && selected.name == p.name"> 
 
     <input type="text" v-model.lazy="selected.name" /> 
 
     <input type="text" v-model.lazy="selected.price" /> 
 
     <button @click="save(i)">Save</button> 
 
     <button @click="selected = {}">Cancel</button> 
 
     </span> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

的問題是，當你點擊一個按鈕，這樣selected總是會調整到目前的產品li始終運行它的點擊事件處理均勻。

要修復它，做一個的的fllowing：

• 更換@click與@click.stop在每個按鈕上的，以防止事件蔓延到li。

• 從li中刪除@click="selected = p"並將其添加到第一個span。這樣處理程序將只在表單不存在時運行。