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示例数据 Firebase data

Answer 1

它是reactivity problem。您需要将this.groupList和this.groupColour重新分配给新引用，以使数据具有响应性：

请尝试

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

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

另一个选择是使用Vue.set

Answer 2

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

从vue文档中：如果您的v模型表达式的初始值与任何选项都不匹配，则该元素将呈“未选中”状态。

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

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

2 个答案: