我正在尝试获取用户任务的选定选项。
我的预期结果是expected
这是我的HTML代码
<div class="form-group has-float-label">
<input v-model="form.name" type="text" name="name" placeholder="Name" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<select name="tasks" v-model="form.tasks" id="tasks" class="form-control" :class="{ 'is-invalid': form.errors.has('tasks') }">
<option disabled value="">Please select one</option>
<option v-for="t in alltask" :key="t"
v-bind:value="t" >{{t.name}}
</option>
</select>
<br />
{{form.tasks}}
</div>
下面是我的JS代码
<script>
export default {
data() {
return {
editmode: false,
users : {},
alltask : {},
form : new Form({
id: '',
name: '',
tasks: {},
})
}
},
methods: {
loadUsers(){
axios.get("/api/v1/users").then(({ data }) => (
this.alltask = data.alltask,
this.users = data.users
));
},
editModal(user){
this.editmode = true;
this.form.reset();
$('#users').modal('show');
this.form.fill(user);
}
},
created() {
this.loadUsers();
}
}
</script>
这是我的json响应
{
"users": [
{
"id": 1,
"name": "zxc",
"username": "zxc",
"tasks": [
{
"id": 1,
"name": "cooking"
}
]
},
{
"id": 2,
"name": "foo",
"username": "foo",
"tasks": [
{
"id": 2,
"name": "cleaning"
}
]
}
],
"alltask": [
{
"id": 1,
"name": "cooking"
},
{
"id": 2,
"name": "cleaning"
}
]
}
v-model的值与选项值相同,但是在单击“更新”按钮后我没有得到它的预先选择,但是如果我更改选项,我放置在v-model下方的v-model代码本身正在根据选项列表进行更改,我可以将其更新到数据库
答案 0 :(得分:0)
问题在于您将整个对象绑定为值。即使您从调用中收到的对象和用于绑定value属性的对象具有相同的“内容”(属性和值),它们也不相同。因此它将不会被预先选择。
您实际应该做的只是绑定任务的ID,如果要显示结果,请从alltask列表中找到具有ID的对象
https://jsfiddle.net/eywraw8t/382079/
<select v-model="form.task">
<option>Please Select</option>
<option :value="t.id" v-for="(t, i) in alltask" :key="i">{{ t.name }}</option>
</select>
<p>
{{ selectedTask }}
</p>
当您仅选择一个任务时,我想知道为什么会有“ form.tasks”-例如,我将其更改为单数。
计算后的道具selectedTask
看起来像这样
computed: {
selectedTask() {
return this.alltask.find(task => {
return task.id === this.form.task
})
}
}