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> 

이것은 나의 방법입니다. 내가 Vuejs 1.0.8 나를 위해 예상대로이 작동

Answer 1

을 사용하고

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

.

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 : click과 v-on의 충돌이었습니다 : v-if가있는 요소가 제거되었을 때 사용자는 v-on이있는 요소를 클릭 할 시간이 없었습니다 :

을 클릭하십시오.

지연을 추가하여 문제를 해결했습니다.