select 1 个元素如何出现在自定义控制输入项列表中

Question

在@vue/cli 4.0.5 / vuejs 应用程序中，我有项目列表和自定义复选框至 select 只有 1 项。我喜欢

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

但是当我 select/deselect 1 项 1) 我的 selected_users_assigned_to_task_id var 有值 true/false，但我期望得到值 nextUsersAssignedToTask.id 2）所有元素都是selected/deselected，而不是我需要的1 哪种方式有效？

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

select 1 个元素如何出现在自定义控制输入项列表中

How select 1 element in listing of custom-control-input items

vuejs2

custom-controls