这是我的代码：点击复选框时，如何在Vue.js上使用v-on传递复选框ID？
<input type="checkbox" id="checklist-1-checkbox-1" v-on:click="addGreenClass(this)" name="checkbox1-1">
vue.js
new Vue({
el: '#admin-dashboard',
methods: {
addGreenClass(element) {
console.log(element);
},
}
});
在我的控制台，我得到指整个文档的对象，而不是指该复选框采购的输入标签事件来自。
我确定我的代码有误，但似乎无法在类似的问题中找到我的答案，这些问题需要使用纯Javascript中的代码。有人可以帮我吗？谢谢。
从Vue实例模板中的内联语句的上下文中传递this将传递对the Window object的引用。
如果要访问Vue实例中方法的元素，可以使用ref。不需要传递任何东西。
Here's the documentation on the ref attribute.
下面是一个例子：
new Vue({
el: '#app',
methods: {
addGreenClass() {
console.log(this.$refs.input)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<input ref="input" @click="addGreenClass">
</div>如果你想添加一个类的元素，你并不需要引用元素在你的addGreenClass方法中。只需使用:class="inputClasses"将一组类名称（例如inputClasses）绑定到输入，然后在addGreenClass方法中将所需类的名称推入该数组。 Vue公司将自动更新DOM：
new Vue({
el: '#app',
data() {
return {
inputClasses: ['large'],
}
},
methods: {
addGreenClass() {
this.inputClasses.push('green');
}
}
}).large {
height: 40px;
}
.green {
border: 3px solid green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<input :class="inputClasses" @click="addGreenClass">
</div>o，我正在尝试，现在:)抱歉，我的vue.js技能很差。 :) –
你是天赐之宝！ –
由于您使用复选框，我偷了从@thanksd一些代码，并显示它如何，甚至没有使用一种方法来完成。这突出显示了Vue的数据驱动方法。
new Vue({
el: '#app',
data() {
return {
classes: [],
}
}
}).large {
height: 40px;
}
.green {
border: 3px solid green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<div :class="classes">Styled DIV</div>
<label>
<input type="checkbox" value="green" v-model="classes">
Green
</label>
<label>
<input type="checkbox" value="large" v-model="classes">
Large
</label>
</div>thnx !!!!!!!! :) –
是事做，如果我使用“这个”表单元素，它通过整个表单元素的对象上，而不是仅仅输入复选框我试图参考来自？ –
你想用元素做什么？通常还有其他方法可以完成您想要在Vue中执行的操作。 – Bert
我需要给同一个容器div中的元素添加新的类。我应该将代码放在包含元素的组件中，但我的手已满...... –