Vue.js 复选框组件多个实例

Posted 2023-02-23

【中文标题】Vue.js 复选框组件多个实例

【英文标题】：Vue.js checkbox component multiple instances

【发布时间】：2018-03-24 18:20:20

【问题描述】：

我有一个使用复选框的过滤器列表。我正在尝试使每个复选框都成为自己的组件。所以我遍历我的过滤器列表，为每个过滤器添加一个复选框组件。 Vue.js documentation 表示，如果我有多个使用相同模型的复选框，则数组将使用复选框的值进行更新。如果复选框组是父组件的一部分，我看到它可以工作。但是，如果我将复选框设为组件并在循环中添加每个复选框组件，则模型不会按预期更新。

我怎样才能拥有一个复选框组件来更新父级上的数组？我知道我可以通过为更新数组的组件上的方法发出一个事件来做到这一点，但 Vue 文档看起来好像框架为你做了这件事。

这是我一直在玩的代码示例https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3

【问题讨论】：

请在帖子本身中包含相关代码，而不仅仅是指向它的链接。

【参考方案1】：

这是一个工作版本。

<template>
  <div class="filter-wrapper">
    <input type="checkbox" v-model="internalValue" :value="value">
    <label>label</label>
  </div>
</template>

<script>
  export default 
    props: ['checked','value', 'label'],
    model: 
      prop: "checked"
    ,
    computed:
      internalValue: 
        get()return this.checked,
        set(v)this.$emit("input", v) 
      
    
  
</script>

更新bin。

【讨论】：

太棒了，谢谢你。如果我理解这是如何工作的，请告诉我。您正在为组件创建一个内部模型，并将其值设置为从父级传入的模型。我理解正确吗？

@MichaelTurnwall 你明白了。并且当内部模型发生变化时，变化会发送给父级。

【参考方案2】：

@Bert 给出的答案是对的。我只想完成图片与组件列表以及它们是如何集成的。因为这是一个有用的模式。

还包括全选功能

ListItem.vue

<template>
    <div class="item">
        <input type="checkbox" v-model="internalChecked" :value="item.id" />

        ... other stuff
    </div>
</template>



<script>
    export default 
        // Through this we get the initial state (or if the parent changes the state)
        props: ['value'],

        computed:
            internalChecked: 
                get()  return this.value; ,

                // We let the parent know if it is checked or not, by sending the ID
                set(selectedId)  this.$emit("input", selectedId) 
            
        
  
</script>

List.vue

<template>
    <div class="list">
        <label><input type="checkbox" v-model="checkedAll" /> All</label>

        <list-item
            v-for="item in items"
            v-bind:key="item.id"

            v-bind:item="item"
            v-model="checked"
        </list-item>

        ... other stuff
    </div>
</template>



<script>
    import ListItem from './ListItem';


    export default 
        data: function() 
            return: 
                // The list of items we need to do operation on
                items: [],

                // The list of IDs of checked items
                areChecked: []
            
        ,


       computed: 
           // Boolean for checked all items functionality
           checkedAll: 
                get: function() 
                    return this.items.length === this.areChecked.length;
                ,

                set: function(value) 
                    if (value) 
                        // We've checked the All checkbox
                        // Starting with an empty list
                        this.areChecked = [];
                        // Adding all the items IDs
                        this.invoices.forEach(item =>  this.areChecked.push(item.id); );

                     else 
                        // We've unchecked the All checkbox
                        this.areChecked = [];
                    
                
            
       ,


        components: 
            ListItem
        
  
</script>

选中复选框后，我们会在选中 IDS [1, 5] 列表中使用这些ID 对items 进行操作

【讨论】：

谢谢你，我相信你有areChecked的List.vue应该是checked。否则，这工作得很好。