Question

我在vuejs中有一个切换器组件。（CheckBox.vue）模板如下，只要我为输入字段提供ID，切换器就可以工作。但是我不能使用id，因为另一个组件中有多个切换器。当我删除复选框的ID时，它不起作用。发生这种情况的原因是什么？如何解决？

<template>
<div class="checkbox">
    <label for="checkbox" class="switch">
      <input type="checkbox" id="checkbox" v-model="checked" @click="onChange">
      <span class="slider round"></span>
    </label>
  </div>
</template>
<script>
export default {
  name: 'CheckBox',
  props:{
    defaultChecked:{
      type:Boolean,default:true
    }
  },
  data:function(){
    return {
      checked: this.defaultChecked
    }
  },
  methods:{
    onChange:function(){
      this.checked=!this.checked;
      this.$emit('status',this.checked)
    }
  }
}
</script>

如果我将id赋予复选框并将其包含在另一个组件中，则此代码可以正常工作。但是当我删除id时，切换器停止工作。该组件是：

//component
<div>
<CheckBox  v-model="this.checkbox" @status="changeStatus" style="float:right"></CheckBox>

//Script

import CheckBox from './CheckBox.vue'
export default {
    name: 'Brands',
    components:{
      CheckBox
    },
    data:function(){
      return {
        checkbox:true
      }
    },
    methods:{
      changeStatus:function(){
        this.checkbox = !this.checkbox
      }
    }
}

vuejs中的可重用组件是否需要ID？

0 个答案: