单击复选框后，如何在Vue.js中使用v-on传递复选框ID？

苏Su

这是我的代码：

<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编写代码。有人可以在这里帮助我吗？谢谢。

感谢：D

this从Vue实例模板中的内联语句的上下文传递将要传递对Windowobject的引用。

如果要从Vue实例中的方法访问元素，则可以使用ref。无需传递任何内容。

这是关于ref属性的文档。

这是一个例子：

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方法中完全引用该元素。只需使用即可将一个类名数组（例如inputClasses）绑定到您的输入:class="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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。