Vuejs v-on:click not working in v-if

Question

It is strange. I am trying to trigger a method when an element is clicked in the v-for loop. But it does not work when I use v-if or v-show. This is my HTML code sample;

 <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>

This is my method;

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

I am using Vuejs 1.0.8

Roy J · Accepted Answer · 2017-03-23 18:27:38Z

2

This works as expected for me.

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>

answered Mar 23, 2017 at 18:27

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3072613 Over a year ago

Thanks. I solved the problem finally. This was just a conflict between the v-on:blur and v-on:click

user3072613 · Accepted Answer · 2017-03-24 00:01:23Z

1

I have solved the problem. This was just a conflict between the v-on:click and v-on:blur When the element that had v-if was removed the user didn't have any time to click on the element with the v-on:click

I solved the problem by adding a delay.

answered Mar 24, 2017 at 0:01

user3072613

3633 gold badges6 silver badges18 bronze badges

1 Comment

JackChouMine Over a year ago

Could u give a demo? think you. I dont understand thsi way. I have this problem.

Collectives™ on Stack Overflow

Vuejs v-on:click not working in v-if

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related