laravel vue select selected option not display value

Question

i'm trying to get the selected option of a user task.

myresult

what my expected result is like this expected

Here is my Html code

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

Below is my JS code

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

this is my json response

{
    "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"
        }
    ]
}

the value of v-model is the same with option value but i don't get it to get pre selected upon clicking update button, but if i change the option the v-model code that i put below the v-model itself is getting changed following the option list and i can update it to the db

Answer 1

The Problem is that you bind the whole object as value. Even though the object you receive from your call and the object you used to bind the value property to have the same "content" (props & values) they are not the same. So it will not be preselected.

What you actually should do is only bind the id of the task and if you want to display the result find the object that has the id from your alltask list

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>

As you only select one task I was wondering why you have "form.tasks" - for my example I changed it to singular.

The computed prop selectedTask could look like this

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