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

Question

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

myresult

我的预期结果是这样的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 代码根据选项列表本身正在发生变化，我可以将其更新到数据库

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” - 在我的示例中，我将其更改为单数。

计算出来的 prop selectedTask 可能看起来像这样

computed: {
  selectedTask() {
    return this.alltask.find(task => {
      return task.id === this.form.task
    })
  }
}