点击复选框时,如何在Vue.js上使用v-on传递复选框ID?
这是我的代码:点击复选框时,如何在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中的元素添加新的类。我应该将代码放在包含元素的组件中,但我的手已满...... –