Vuejs2 如何在自定义控件输入项列表中选择1个元素
在@vue/cli 4.0.5/vuejs应用程序中,我有项目列表和自定义复选框 仅选择一项。我确实喜欢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
<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并保存此文件