javascript 如何在Vue 3父组件和子组件之间同步复选框

qojgxg4l  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(141)

我有一个Vue 3 InertiaJS应用程序,它包含一组父/子组件,其中父组件包含一个表单,沿着一个子组件,用于搜索用户并在表格中显示结果,其中每行都有一个复选框,这样我就可以选择用户,然后将它们作为表单的一部分提交。我需要做的是将父组件与子组件的复选框值同步。这是我所拥有的。
Create.vue

<script setup>
    import {Inertia} from '@inertiajs/inertia';
    import {ref} from 'vue';
    import {Head, Link, useForm} from '@inertiajs/inertia-vue3'

    const form = useForm({
        name: '',
        checkedNames: []
    });
    const checkedNames = ref([])
    const props = defineProps({
        users: Object
    })
    </script>
    <template>
        <area-user-select
            :users="props.users"
            @searchUsers="searchUsers"
            v-model:checkedNames="checkedNames"
        ></area-user-select>
    </template>

AreaUserSelect.vue(子组件)

<script setup>
    import { Head } from '@inertiajs/inertia-vue3';
    import Icon from '@/Components/Icon.vue';
    import {ref} from 'vue';

    const props = defineProps({
        users: Object,
        filters: Object,
        checkedNames: Array
    })

</script>

<template>
    <div>
    ...
        <div v-if="users.data.length > 0">
            <table class="table-auto">
                <thead>
                <tr class="text-left font-bold">
                    <th class="pb-4 pt-6 px-6 text-sm">Select</th>
                    <th class="pb-4 pt-6 px-6 text-sm">Name</th>
                    <th class="pb-4 pt-6 px-6 text-sm">Last Name</th>
                    <th class="pb-4 pt-6 px-6 text-sm">Member Number</th>
                    <th class="pb-4 pt-6 px-6 text-sm">Status</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="user in users.data" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
                    <td class="border-t">
                        <input
                            type="checkbox"
                            name="selected"
                            :value="user.id"
                            @input="$emit('update:checkedNames', $event.target.value)"
                        />
                    </td>
                    <td class="border-t">
                            {{ user.first_name }}
                    </td>
                    <td class="border-t">
                            {{ user.last_name }}
                    </td>
                    <td class="border-t">
                            {{ user.member_number }}
                    </td>
                    <td class="border-t">
                            {{ user.status }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

这是可行的,在我的父组件中,如果我显示checkedName的值,它只包含最后一个选中项的值,而不是所有选中值的数组。
要将所有选定项同步回父(Create.vue)组件,需要进行哪些更改?

mo49yndu

mo49yndu1#

您可以这样做:
使用"v-model"将父级绑定到组件:

<my-component ... v-model="checkedNames"/>

文档:组件v模型
将复选框绑定到内部组件属性:

<input type="checkbox" ... v-model="checked" />

文档:表单输入绑定-复选框
使用watch结束向父节点发送更新:

watch(checked, (newVal) => { emit('update:modelValue', newVal) });

文档:观察者
这里是Playground:
一个三个三个一个

相关问题