Can't toggle state when clicking on component in Vue

Question

I trying to toggle state when I click on particular element

<script>
import ArrowSwitcher from '@/components/ui/ArrowSwitcher.vue'

export default {
  components: {
    ArrowSwitcher
  },
  data () {
    return {
      showContent: false
    }
  },
  methods: {
    switcher () {
      this.showContent = !this.showContent
    }
  }
}
</script>

<span class='targeting-global__name' @click='switcher'>
Some Text
    <ArrowSwitcher :showContent='showContent'/>
  </span>

When I stick event on parent element (just html, not other component) it works

Surprisingly this approach not changing state at all! Why?

<span class='targeting-global__name'>
    Targeting Global
    <ArrowSwitcher :showContent='showContent' @click='switcher'/>
  </span>

I want to stick click event only to Arrow switcher component instead of whole text

You can't do a normal `v-on:click` (`@click`) on custom components. See here: https://stackoverflow.com/questions/41475447/vue-v-onclick-does-not-work-on-component — James Whiteley, Apr 29 '19 at 13:11

score 1 · Accepted Answer · edited Jul 15 '22 at 01:23

1

To bind native events on components you have to use the following syntax:

<ArrowSwitcher :showContent='showContent' @click.native='switcher'/>

Here's the documentation: https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

edited Jul 15 '22 at 01:23

tony19

125,647
18
229
307

answered Apr 29 '19 at 13:11

Fab

4,526
2
21
45

score 1 · Answer 2 · answered Apr 29 '19 at 13:26

1

You should watch the showContent using computed property:

export default {
...,
computed: {
  showContent: function () {
    return showContent
  }
}

answered Apr 29 '19 at 13:26

Just_lbee

166
1
5

Can't toggle state when clicking on component in Vue

2 Answers2