CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Imperatura
Imperatura

Reputation: 143

v-on:click problem if the elements has another element inside

I am dealing with the problem of my click event in vue js. I made a click even on element that has another element inside it.

Here's my code:

<span class="pull-down-controller" @click="pullDown($event)">
     <span class="indicator">－</span> Controller
</span>

in the frontend it will show － Controller if I click the word Controller it will call the specified function which is pullDown() but why is it whenever I click the indicator or the minus symbol, it will not do anything even if it is inside the <span> where I put the @click event?

The reason why I put a <span> inside it so I can change the symbol to ＋ using jquery.

thanks!

Upvotes: 0

Views: 290

Answers (1)

Brian Lee
Brian Lee

Reputation: 18187

No need for jQuery, Vue's reactivity provides all you need:

new Vue({
  el: '#app',
  template: `
  <span @click="pullDown" style="font-size: 48px;">
     <span>{{ indicator }}</span> Controller
</span>
`,
  data () {
    return {
      expanded: false
    }
  },
  computed: {
    indicator () {
      return this.expanded ? '+' : '-'
    }
  },
  methods: {
    pullDown (event) {
      this.expanded = !this.expanded
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions