laravel vue выберите выбранную опцию, а не отображаемое значение

Question

Я пытаюсь получить выбранный вариант пользовательской задачи.

myresult

каков мой ожидаемый результат, как этот ожидаемый

Вот мой 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>

это мой JSONresponse

{
    "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-модели совпадает со значением параметра, но я не получаю его предварительно выбранным при нажатии кнопки обновления, но если я изменю опцию, код v-модели, которыйя ставлю ниже, что сама v-модель меняется после списка опций, и я могу обновить ее до db

Answer 1

Проблема в том, что вы связываете весь объект как ценность.Даже если объект, который вы получаете по вашему вызову, и объект, который вы использовали для привязки свойства value, имеют одинаковое «содержимое» (реквизиты и значения), они не совпадают.Таким образом, он не будет предварительно выбран.

Что вы на самом деле должны сделать, это только связать идентификатор задачи, и если вы хотите отобразить результат, найдите объект, который имеет идентификатор из вашего списка всех задач

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
    })
  }
}