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

Question

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

<!-- 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>

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

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

提前谢谢大家

Answer 1

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

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

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

Answer 2

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

Answer 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