laravel vue选择所选选项不显示值

Question

我正在尝试获取用户任务的选定选项。

我的结果

什么我预期的结果是这样的预期

这是我的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代码将得到根据选项列表进行了更改，我可以将其更新到数据库

Answer 1

问题是您将整个对象绑定为值。 即使您从调用中收到的对象和用于绑定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
    })
  }
}