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