我试图在组件内使用on单击指令，但它似乎不起作用。当我点击组件时，什么都没有发生，当我应该得到一个“测试点击”在控制台中。我在控制台没有看到任何错误，所以我不知道我做错了什么。
index . html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuetest</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div id="app">
<test v-on:click="testFunction"></test>
</div>
</template>
<script>
import Test from './components/Test'
export default {
name: 'app',
methods: {
testFunction: function (event) {
console.log('test clicked')
}
},
components: {
Test
}
}
</script>
测试。Vue(组件)
<template>
<div>
click here
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
从文档中可以看到:
由于JavaScript的限制，Vue无法检测到对数组的以下更改:
当你直接用索引设置一个项时，例如vm。items[indexOfItem] = newValue .使用实例
当你修改数组的长度时，例如vm.items.length = newLength
以我为例，我是在从Angular迁移到VUE时遇到这个问题的。Fix很简单，但是很难找到:
setValue(index) {
Vue.set(this.arr, index, !this.arr[index]);
this.$forceUpdate(); // Needed to force view rerendering
}
这是@Neps的答案，但有细节。
注意:如果你不想修改你的组件或者没有权限访问它，@Saurabh的答案更适合。
为什么@click不能正常工作?
组件是复杂的。一个组件可以是一个漂亮的小按钮包装器，另一个组件可以是一个包含大量逻辑的完整表。当绑定v-model或使用v-on时，Vue不知道你到底期望什么，所以所有这些都应该由组件的创建者处理。
如何处理点击事件
根据Vue文档，$emit将事件传递给父节点。来自docs的例子:
主文件
<blog-post
@enlarge-text="onEnlargeText"
/>
组件
<button @click="$emit('enlarge-text')">
Enlarge text
</button>
(@是v-on的缩写)
组件处理本机单击事件并发出父元素的@enlarge-text="…"
放大文本可以替换为点击，使它看起来像我们在处理一个本地点击事件:
<blog-post
@click="onEnlargeText"
></blog-post>
<button @click="$emit('click')">
Enlarge text
</button>
但这还不是全部。$emit允许将特定值与事件一起传递。在本机单击的情况下，值为MouseEvent(与Vue无关的JS事件)。
Vue将该事件存储在$event变量中。因此，最好在一个事件中发出$event，以创建本机事件使用的印象:
<button v-on:click="$emit('click', $event)">
Enlarge text
</button>
