Vuejs v-on：點擊不能在v-if

這很奇怪。我試圖在v-for循環中單擊一個元素時觸發一個方法。但是當我使用v-if或v-show時它不起作用。這是我的HTML代碼示例;Vuejs v-on：點擊不能在v-if

<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

來源

2017-03-23 user3072613

可正常工作對我來說。

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>

來源

2017-03-23 18:27:38

謝謝。我最終解決了這個問題。這只是v-on：blur和v-on之間的衝突：點擊 – user3072613

omg非常感謝你@ user3072613。你是他媽的男人！ – shxfee

我已經解決了這個問題。這只是v-on：click和v-on：blur之間的衝突如果刪除了v-if的元素，用戶沒有時間用v-on單擊該元素：點擊

我通過添加延遲來解決問題。

來源

2017-03-24 00:01:23 user3072613

Vuejs v-on：點擊不能在v-if

回答

相關問題