laravel vue选择所选选项不显示值-Java 学习之路

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

我的预期结果是什么样的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>
    

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

这是我的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模型本身下面的v-model代码就会越来越多在选项列表后更改，我可以将其更新到数据库

1 回答

0
问题是您将整个对象绑定为值 . 即使您从调用中收到的对象和用于绑定value属性的对象具有相同的“内容”（props和values），它们也不一样 . 所以它不会被预选 .

你实际应该做的只是绑定任务的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
    })
  }
}
```
回复于 2024-05-17T14:36:50+08:00

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

1 回答

相关问题