我有一个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
)组件,需要进行哪些更改?
1条答案
按热度按时间mo49yndu1#
您可以这样做:
使用"v-model"将父级绑定到组件:
文档:组件v模型
将复选框绑定到内部组件属性:
文档:表单输入绑定-复选框
使用
watch
结束向父节点发送更新:文档:观察者
这里是Playground:
一个三个三个一个