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：click和v-on之间的冲突：blur当删除了v-if的元素时，用户没有时间点击带有v-on的元素：click

我通过添加延迟解决了这个问题。

Vuejs v-on：点击不在v-if中工作

2 个答案: