Событие клика Vue 2.0 изнутри компонента не регистрируется - PullRequest
Новая
       15

Событие клика Vue 2.0 изнутри компонента не регистрируется

0 голосов
/ 16 апреля 2019

У меня есть приложение Vue, в котором есть компонент, представляющий всю страницу.Внутри этого компонента у меня есть другой компонент, который представляет (например) меню.Внутри этого меню у меня есть кнопка с обработчиком @click, который должен обрабатывать Vue.Однако этого не происходит, и я схожу с ума.Пожалуйста, помогите!

У меня есть кнопка с синей рамкой, которую вы должны нажать, чтобы текст EXPAND изменился.Компоненты работают просто отлично, и текст отображается по-разному, когда я изменяю значение расширенного свойства в компоненте меню.Но я не могу изменить это значение в результате щелчка. 

Vue.component('vuemenu', {
	template: '#menu-template',
  data: function() {
    return {
    	expanded: false
    }
  },
  methods: {
  	expand: function() {
    	this.expand = !this.expanded;
    }
  }
})

Vue.component('page', {
	template: '#page-template',
  methods: {
  }
})

new Vue({
  el: '#app',
  data: {
  },
  methods: {
  }
})
.expanded {
  background-color: red;
  color: white;
  font-size: 72px;
}

.clickme {
  padding: 10px;
  border: 1px solid blue;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <page></page>
</div>

<template id="page-template">
  <div id="page">
  Here is the menu
    <vuemenu></vuemenu>
    And here is the rest of the page
  </div>
</template>
https://stackoverflow.com/questions/ask#
<template id="menu-template">
  <div id="menu">
  Menu
  <div class="clickme" @click="expand">
  click
  </div>
  <div :class="{'expanded': expanded}">
    EXPAND
  </div>
  </div>
</template>

1 Ответ

1 голос
/ 16 апреля 2019

В этом коде есть ошибка 

Vue.component('vuemenu', {
    template: '#menu-template',
  data: function() {
    return {
        expanded: false
    }
  },
  methods: {
    expand: function() {
        this.expanded = !this.expanded; // this.expanded not this.expand
    }
  }
})

Vue.component('page', {
    template: '#page-template',
  methods: {
  }
})

new Vue({
  el: '#app',
  data: {
  },
  methods: {
  }
})
...