Vuejs DOM 未更新答案

【问题标题】：Vuejs DOM Not UpdatingVuejs DOM 未更新
【发布时间】：2017-03-03 19:49:33
【问题描述】：

我在这里设置了一个简单的编辑屏幕，我不知道为什么当我单击保存或取消时它没有隐藏表单。

Form 正在循环中显示一个简单的指令 selected.name == p.name。当我取消设置所选对象时，它不会更新 DOM。

表单内容正在保存到数组中，您可以看到是否进行了一些更改，单击保存，然后单击新行。但表格不会在取消或保存时隐藏。

希望我忽略了一些简单的东西。

谢谢

var vm = new Vue({
  el: '#vue-instance',
  data: {
    selected: {
    	name:'',
    	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
    	  };
      }
  }
});

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

【问题讨论】：

标签： javascript dom vue.js

【解决方案1】：

问题是li 始终运行其单击事件处理程序，即使您单击按钮也是如此，因此selected 将始终重新分配给当前产品。

要修复它，请执行以下操作中的一个：

将每个按钮上的@click 替换为@click.stop，以防止事件传播到li。
从li 中删除@click="selected = p" 并将其添加到第一个span。这样处理程序只会在表单不存在时运行。

【讨论】：

谢谢！你是我的英雄。