javascript - 无法在Vue中设置下拉列表中的默认选定项

Question

我有一个 v-for 循环，它循环遍历(对象的)groupList 数组中的所有内容，并为数组中的每个对象创建一个输入框和一个选择下拉列表。我希望输入文本框的值来自每个对象中的“组”值，并且选择列表来自每个对象中的“颜色”值。输入文本框数据传输得很好，没有问题，我只是无法让默认选定的项目出现在选择框中。什么也没有发生。我尝试在选择标签中设置 v-bind:selected="groupList[id].colour"，但这不起作用。我一定做错了什么，我只是无法弄清楚。据我所知，数据确实出现在数组中。

HTML:

<template>
  <div class="centreContent">
    <div class="groupContainer">
      <div v-for="(groupListItem, id) in groupList" :key="groupListItem[id]">
        <input type="text" class="groupListAll" v-model="groupList[id].group"> 

        <select class="groupColourContainer" v-model="groupList[id].colour">
          <option class="groupColourValue" v-for="(groupColour, id) in groupColour" :key="groupColour[id]" v-bind:value="groupColour.value"> {{ groupColour.colour }} </option>
        </select>

        </div>

      <input type="text" class="newGroup" name="test" id="" v-model="newGroup">
      <button class="newGroupButton" v-on:click="addGroup()">Create new group</button>
      <button class="saveGroupButton" v-on:click="saveGroups()">Save all groups</button>
      <div class="feedback" v-if="feedback"> {{ feedback }} </div>

    </div>

  </div>
</template>

脚本:

<script>

import db from '@/firebase/init'

export default {
  name: 'Settings',
  data(){
    return {
      newGroup: null,
      feedback: null,
      groupList: [],
      groupColour: []    

    }
  },

    methods: {
      addGroup(){
       if (this.newGroup){
         this.groupList.push(this.newGroup);
         this.newGroup = null;
         this.feedback = null;
       } else{
         this.feedback = "Enter a group name";
       }

      },


      saveGroups(){

        db.collection('group').doc(this.groupList.id).update({ //update record in db
          groups: this.groupList
        }).then(() => {
          console.log(this.groupList)
          this.$router.push({name: 'PasteList'}) //redirect to homepage afterwards
        }).catch(err => {
          console.log(err);
        }),

        printData()
        {
          console.log(data)
        }

      }

    },

   created(){

    db.collection('grouplist').get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        let group = doc.data();
        group.id = doc.id;
        this.groupList.push(group)
      })
    });

    db.collection('groupcolour').get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        let colour = doc.data();
        colour.id = doc.id;
        this.groupColour.push(colour)
      })
    });
  }


  }

</script>

Firebase 示例数据

Answer 1

通过将选项标记中的“v-bind:value=”groupColour.value””更改为“v-bind:value=”groupColour.colour””来修复。“选择”项的值未正确设置。

来自 vue 文档:如果 v-model 表达式的初始值与任何选项都不匹配，则该元素将以“未选择”状态呈现。

上面 ittus 建议的更改是不必要的。