搜索

首页  >  问答  >  正文

制作Vue自定义复选框组件的正确方法

<p>如何在Vue中创建自定义复选框。当复选框改变时,它应该调用函数。 我得到了错误“无法读取未定义的属性'id'” 和警告“在执行本机事件处理程序期间出现未处理的错误”</p> <p>自定义复选框:</p> <pre class="brush:js;toolbar:false;"><template> <div class="filter"> <input :ref="id" :id="id" type="checkbox" class="filter-checkbox" @change="$emit('do', $emit)" /> <span>{{ label }}</span> </div> </template> <script> export default { name: "Checkbox", props: { label: { type: String }, isSelected: { type: Boolean }, id: { type: String } }, } </script></pre> <p>我想在父组件中使用它:</p> <p> <pre class="brush:js;toolbar:false;"><Checkbox v-for="filter of filters" :key="filter.id" :label="filter.name" :id="filter.id" v-model="filter.selected" @do="mutuallyExclusive(filter.id)" /></pre> </p>
P粉135292805P粉135292805478 天前524

全部回复(1)我来回复

  • P粉343408929

    P粉3434089292023-09-03 00:21:00

    无法重复出现未定义和未处理的错误,您需要进一步调试。

    但是您正在发出emit函数,这很奇怪,而且无论是否选中,值始终为filter.id

    您可能想要做一些类似以下的操作:

    new Vue({
      el: '#app',
      components: {
        'Checkbox': {
          template: '#checkbox-template',
          props: {
            label: {
              type: String,
              default: ''
            },
            value: {
              type: Boolean,
              default: false
            },
            id: {
              type: String,
              default: ''
            }
          }
        }
      },
      data: () => ({
        filters: [{
          id: 1,
          name: 'a',
          selected: true,
        },{
          id: 2,
          name: 'b',
          selected: false,
        }]
      }),
      methods: {
        mutuallyExclusive(value) {
          console.log(value)
        }
      }
    })
    <div id="app">
      <Checkbox 
        v-for="filter of filters" 
        :key="filter.id" 
        :label="filter.name" 
        :id="filter.id" 
        v-model="filter.selected" 
        @change="mutuallyExclusive" 
      />
    </div>
    
    <template id="checkbox-template">
      <div class="filter">
        <input 
          :ref="id" 
          :id="id" 
          type="checkbox" 
          class="filter-checkbox"
          :checked="value"
          @change="$emit('change', {value:$event.target.checked, id})" 
        />
        <span v-if="label">{{ label }}</span>
      </div>
    </template>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

    回复
    0
  • 取消回复