Vuejs v-on：クリックしてv-ifで動作しない場合

Question

これは奇妙です。私は、要素がv-forループでクリックされたときにメソッドをトリガーしようとしています。しかし、v-ifまたはv-showを使用すると動作しません。これは私のHTMLコードサンプルです。

<div class="chosen-drop custom_choices" v-if="showResults"> <!-- --> 
      <ul class="chosen-results"> 
       <li class="active-result level-0 isresult" v-for="City in Results" v-bind:class="{ highlighted: SelectCity.name==City.name }" v-on:click="HandleSelectCity(City)" >{{ City.name }}</li> 
      </ul> 
</div> 

これは私の方法です。

  methods: { 
       HandleSelectCity: function (City){ 
        this.SelectCity = City; 
        this.search_input = City.name; 
       } 
      }, 

私は私のために期待されるように、これは動作しますVuejs 1.0.8に

Answer 1

を使用しています。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    showResults: true, 
 
    Results: [{ 
 
     name: 'one' 
 
     }, 
 
     { 
 
     name: 'two' 
 
     } 
 
    ], 
 
    SelectCity: null 
 
    }, 
 
    methods: { 
 
    HandleSelectCity(City) { 
 
     this.SelectCity = City; 
 
     this.search_input = City.name; 
 
    } 
 
    } 
 
});

.highlighted { 
 
    background-color: yellow; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.8/vue.min.js"></script> 
 
<div id="app" class="chosen-drop custom_choices" v-if="showResults"> 
 
    <ul class="chosen-results"> 
 
    <li class="active-result level-0 isresult" v-for="City in Results" v-bind:class="{ highlighted: SelectCity.name==City.name }" v-on:click="HandleSelectCity(City)">{{ City.name }}</li> 
 
    </ul> 
 
</div>

Answer 2

私は、問題を解決しました。これは、v-onとクリックとの間の競合だけでした：blur v-ifを持つ要素が削除されたとき、ユーザーはv-onでその要素をクリックする時間がありませんでした：

遅延を追加して問題を解決しました。