组件的 v-for 循环中的选定值

Posted 2023-02-23

【中文标题】组件的 v-for 循环中的选定值

【英文标题】：Selected values in a v-for loop of components

【发布时间】：2020-02-24 08:35:12

【问题描述】：

我实现了一个内部有一个选择元素的组件，它或多或少像下面这样：

<!-- child component -->
    <template>
        <b-form-select 
            v-model="selectedProject"
            :options="projects"
            @change="changedValue">
            <template v-slot:first>
                <option :value="null" disabled>-- Please select a project --</option>
            </template>
        </b-form-select>
    </template>

    <script>
    export default 
        name: 'AllocationItem',
        props: 
            projects: 
                type: Array,
                default: () => [ value: Number,  text: String]
            
        ,
        data() 
            return 
                selectedProject: null,
            
        ,
        methods: 
            changedValue(value) 
                this.selectedProject = value;
            
        

    
    </script>

我在父组件中使用此组件，可以通过单击按钮添加其他 AllocationItem。

为此，我使用了一个数组，每次点击添加按钮时我都会推送一个新项目（我不知道这是否正确...）

跟随父组件代码：

<!-- parent component -->
    <template>
        <b-button class="btnAction" @click="addItem()">Add</b-button>
        <b-button class="btnAction" @click="sendAllocation()">Send</b-button>
        <b-row v-for="allocation in resourceItem.allocations" v-bind:key="allocation.id">
            <allocation-item v-bind:projects="projects"></allocation-item>
        </b-row>
    </template>


    <script>
        export default 
        name: 'Management',
        components: 
            AllocationItem
        ,
        data() 
            return 
                allocations: []
            
        ,
        methods: 
            addItem() 
                this.allocations.push(AllocationItem);
            ,
            sendAllocation() 
                this.allocations.forEach((allocation) => 
                    // I WOULD LIKE TO HAVE ALL SELECTED VALUE HERE!!!
                );
            ,
        ,
        created() 
            const dataProjects = this.getProjectsData();
            dataProjects.then(response => 
                this.projects = response.map((item) => 
                    return value: item.id, text: item.name
                )
            );
        
    </script>

在我的应用程序中，我有另一个按钮，发送按钮，应该读取在所有子组件（分配项）中选择的值。

我怎样才能拥有一个具有该选定值的数组？

提前谢谢大家

【参考方案1】：

这取决于“发送按钮”组件与父​​组件的关系。 您可以：

使用 $emit() 方法将数据沿组件树向上传播到共享父组件。然后将其支撑到“发送按钮”组件。 使用Vuex 获得单一事实来源。这是一个将您的所有数据保存在一个集中对象中的存储。

也许您可以向我们提供有关项目结构的更多信息？

【讨论】：

谢谢@laurensvm，我知道这两种解决方案，我正在尝试使用 $emit on change（我的项目中没有 vuex）。但我不明白一件事：“我如何区分 $emit 和不同的组件？”例如，我可以有 3 个或 4 个（或更多）组件由 v-for 循环呈现...我如何区分 $emit 与第一个组件和 $emit 与第二个或第三个组件？

如果它们是相等的组成部分，我认为你不能。但这并不重要，对吧？

对不起@laurensvm，但我不明白。什么意思？

【参考方案2】：

首先，问问自己这个组件是否在其他地方使用，除了这里。如果你只使用一次，把它构建到父组件中，你的问题就解决了。 否则我会选择 @laurensvm 的使用 emit 或 Vuex 的方法。

【讨论】：

感谢您的反馈塞巴斯蒂安。显然我需要在不止一个部分中使用组件:)

【参考方案3】：

经过对谷歌的一些研究，我找到了一个解决方案。我不知道它是否正确，但它工作正常而且看起来很干净。

我的解决方案包括在子组件上使用发射，在父组件上使用 v-model，如以下示例所示。

<!-- child component -->
    <template>
        <b-form-select 
            v-model="selectedProject"
            :options="projects"
            @change="changedValue">
            <template v-slot:first>
                <option :value="null" disabled>-- Please select a project -- 
</option>
            </template>
        </b-form-select>
    </template>

    <script>
    export default 
        name: 'AllocationItem',
        props: 
            projects: 
                type: Array,
                default: () => [ value: Number,  text: String]
            ,
            value: 
                type: Number
            
        ,
        data() 
            return 
                selectedProject: this.value
            
        ,
        methods: 
            changedValue(value) 
                this.$emit('input', value);
            
        

    
    </script>

在父级上使用 v-model 上的数组变量。 像这样的：

<!-- parent component -->
<template>
    <b-container>
            <b-row>
                    <b-button class="btnAction" variant="success" @click="addItem(index)">Add</b-button>
                    <b-button class="btnAction" @click="sendAllocation(index)">Send</b-button>
            </b-row>
            <b-row v-for="(allocation, index) in resourceItem.allocations" v-bind:key="allocation.id">
                <allocation-item v-bind:projects="projects" v-model="allocationItemSelected[index]"></allocation-item>
            </b-row>
    </b-container>
</template>

点击下面的代码框链接查看可运行的示例：

https://codesandbox.io/s/vue-template-4f9xj?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&moduleview=1