Vue.js: Button verschwindet beim Hinzufügen von v-on: Klicken Sie

Question

Ich verwende das Beispiel von https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

Ich mag eine Nachricht in #content verstecken, wenn die Schaltfläche geklickt wird, aber ich stieß seltsames Problem: button Element verschwindet, wenn v-on:click etwas enthält. Wenn ich "Schalter" von ihm entferne, erscheint Knopf auf der Seite.

Auch meine zweite Frage: Ist das der richtige Weg, Dinge mit Vuejs zu zeigen/zu verstecken?

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

Answer 1

switch ist ein reserviertes Javascript Schlüsselwort, mit anderen Namen wie toggle für das Verfahren wird das Problem lösen.

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/vue@2.5.2/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>

Als Randbemerkung, entmutigen ich nachdrücklich den Ansatz in diesem Beispiel. Vue-Instanzen sollten isoliert werden. Das Erstellen von Komponenten wird empfohlen, und die Kommunikation zwischen ihnen kann über einen Ereignisbus oder einen vuex erfolgen.