Я использую пример из https://vuejs.org/v2/guide/events.html#Method-Event-Handlers
Я хочу скрыть сообщение в #content
при нажатии кнопки, но у меня возникла странная проблема: элемент button
исчезает, когда v-on:click
содержит что-либо. Когда я удаляю из него "переключатель", на странице появляется кнопка.
Кроме того, мой второй вопрос: это правильный способ показывать/скрывать вещи с помощью Vuejs?
Мой код:
<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>
switch
является зарезервированным ключевым словом Javascript, используя другое имя, такое как toggle
для метода, решит проблему.
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>
В качестве побочного примечания я категорически отверг подход в этом примере. Экземпляры Vue должны быть изолированы. Рекомендуется создавать компоненты, и связь между ними может происходить через шину событий или vuex.