Question

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

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

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

希望我能忽视它的简单事物。

由于

＆＃13;

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
    	  };
      }
  }
});

＆＃13;

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

＆＃13;

Answer 1

问题是li始终在点击事件处理程序时运行，即使您点击某个按钮也会将selected始终重新分配给当前产品。

要修复它，请执行一次 fllowing：

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

Vuejs DOM未更新

1 个答案: