Vue.js: Button disappears when adding v-on:click

Question

I'm using the example from https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers

I want to hide a message in #content when the button is clicked, but I encountered weird problem: button element disappears when v-on:click contains anything. When I remove "switch" from it, button appears on page.

Also, my second question: Is this the proper way of showing/hiding things using Vuejs?

My code:

<div id="navigation">
    <button v-on:click="switch">Switch</button>
</div>

<div id="content">
    <p v-if="show">{{ message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var content = new Vue({
        el: '#content',
        data: {
            message: 'Hello Vue!',
            show: true
        }
    });

    var navigation = new Vue({
        el: '#navigation',
        data: {
        },
        methods: {
            switch: function() {
                content.show = !content.show;
            }
        }
    });
</script>

Ricky Ruiz · Accepted Answer · 2017-10-26 22:38:48Z

3

switch is a reserved Javascript keyword, using another name such as toggle for the method will solve the problem.

var content = new Vue({
  el: '#content',
  data: {
    message: 'Hello Vue!',
    show: true
  }
});

var navigation = new Vue({
  el: '#navigation',
  data: {},
  methods: {
    toggle: function() {
      content.show = !content.show;
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="navigation">
  <button v-on:click="toggle">Switch</button>
</div>

<div id="content">
  <p v-if="show">{{ message}}</p>
</div>

As a side note, I strongly discourage the approach in this example. Vue instances should be isolated. Creating components is recommended and communication between them can happen via an event bus or vuex.

edited Oct 26, 2017 at 22:38

answered Oct 26, 2017 at 22:33

Ricky Ruiz

27k7 gold badges48 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Vue.js: Button disappears when adding v-on:click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related