Vuejs2 如何在自定义控件输入项列表中选择1个元素

Vuejs2 如何在自定义控件输入项列表中选择1个元素,vuejs2,custom-controls,Vuejs2,Custom Controls,在@vue/cli 4.0.5/vuejs应用程序中,我有项目列表和自定义复选框 仅选择一项。我确实喜欢 <tr v-for="nextUsersAssignedToTask in usersAssignedToTask" :key="nextUsersAssignedToTask.id" > <td class="text-center"> <input type="chec

在@vue/cli 4.0.5/vuejs应用程序中,我有项目列表和自定义复选框 仅选择一项。我确实喜欢

    <tr v-for="nextUsersAssignedToTask in usersAssignedToTask" :key="nextUsersAssignedToTask.id" >

        <td class="text-center">
            <input
                    type="checkbox"
                    class="custom-control-input"
                    :name="'custom_selected_users_assigned_to_task_id_'+nextUsersAssignedToTask.id"
                    :id="'custom_selected_users_assigned_to_task_id_'+nextUsersAssignedToTask.id"
                    :value="'custom_selected_users_assigned_to_task_id_'+nextUsersAssignedToTask.id"
                    v-model="selected_users_assigned_to_task_id"
            >
但当我选择/取消选择1项时 1我选择的\u用户\u分配给\u任务\u id变量的值为true/false,但我希望获得nextUsersAssignedToTask.id的值 2选择/取消选择所有元素,而不是我需要的1 哪种方法有效?

请尝试以下代码:

<template>
    <div>
        <tr v-for="nextUsersAssignedToTask in usersAssignedToTask" :key="nextUsersAssignedToTask.id" >
            <td class="text-center">
                <input
                    type="checkbox"
                    class="custom-control-input"
                    :name="'custom_selected_users_assigned_to_task_id_'+nextUsersAssignedToTask.id"
                    :id="'custom_selected_users_assigned_to_task_id_'+nextUsersAssignedToTask.id"
                    :value="'custom_selected_users_assigned_to_task_id_'+nextUsersAssignedToTask.id"
                    v-model="nextUsersAssignedToTask.selected"
                    v-on:change="changeItem(nextUsersAssignedToTask)">
            </td>
        </tr>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                usersAssignedToTask: [
                    {id: 1, text: '1', selected: false},
                    {id: 2, text: '2', selected: false},
                ]
            };
        }
        methods: {
            changeItem(item) {
                console.log('item ' + item.id + ' changed to ' + item.selected);
            }
        },
        watch: {
            'usersAssignedToTask': {
                handler: function() {
                    console.log(this.usersAssignedToTask)
                },
                deep: true
            }
        }
    }
</script>

<style scoped>

</style>

谢谢应用代码后,我可以选择/取消选择任何复选框,但我如何才能只选择1个元素上次选中?@PeterSmith,我编辑代码并添加v-on:change-on-input元素以满足您的需要。还添加了记录任何更改的方法。谢谢,使用changeItem方法,我可以获取上次单击的项目的id,但由于在清单中单击了几个项目,我需要取消选择所有优先单击的项目。如何执行此操作?@PeterSmith在该exist元素上方添加一个按钮或一个输入复选框,并在“更改”事件中,将所有选中的usersAssignedToTask设为false。@PeterSmith Hi。我编辑您的JSFIDLE并保存此文件