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。这样处理程序将只在表单不存在时运行。