Vuejs DOMが更新されていない

Question

Iveは簡単な編集画面をここに設定しています。保存またはキャンセルをクリックしたときにフォームが隠れていない理由はわかりません。

フォームは、ループ内で単純な指示文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

問題がliでは、常にあなたがそうselectedは、常に現在の製品に再割り当てされるボタンをクリックした場合でも、そのクリックイベントハンドラを実行しています。それを修正する

、fllowingのを行います

• はliまで伝播するからイベントを防ぐために、ボタンのそれぞれに@click.stopで@clickを交換してください。

• liから@click="selected = p"を削除し、最初のspanに追加してください。この方法では、フォームが存在しない場合にのみハンドラが実行されます。