Question

我正在做一个项目。该项目的一部分是允许用户从组合框中选择位置/地点。因此，用户可以从数据库中选择一个预设位置或创建一个新位置。我有大量的预设市区数据，用户可以直接输入，然后该信息会弹出到文本字段。

我基本上遵循了Firebase的文档，并尝试了Arthur Longbottom提供的https://medium.com/@art.longbottom.jr/how-to-connect-vue-js-d0cb9bf3d696方式。

因为市区的数据是一个数组，所以我也尝试了Firestore 数组查询，由https://www.youtube.com/watch?v=4t2eHrFW_0M提供。

不幸的是，它们都不适合我。

<v-combobox

   v-model="citySelector"
   :items="dunedinDistrict" // ** I bind items in this data array
   :search-input.sync="search"
   :key="dunedinDistrict.key" // ** give it a special key
   hint="maximum of 2 regions or places"
   persistent-hint
   hide-selected
   label= "You found it at/in..."
   color="#B388FF"
   :rules="[ rules.required]"
   prepend-inner-icon="fal fa-map-marker-check"
   clear-icon="fal fa-times-circle"
   clearable
   multiple
   small-chips
   deletable-chips
   ref="combobox"
   @change="toggleMenu"
   >
<script>
   data () {
     // set regions input selection
  dunedinDistrict: [ //**   this is my instance, whihc is hard-coded 
                     right now, but I want to store this dummy city 
                     district data into firebase instead. I have 
                     already stored as one array that contains a 
                     ton of district name.
    // 'city central',
    // '101 chopstick',
    // 'bus',
    // 'city central asdas',
    // 'city central bank',
    // 'city central 101 chopstick'
  ],
  search: null,
  citySelector: null
    }
   },

 created () {// This is the method what i attempted to fetch data 
                 from firebase, but I only got [object Object], 
                  when I clicked the combobox. And got an error, 
                  which is Avoid using non-primitive value as the key, 
                  use string/number value instead
    let firestore = firebase.firestore()
    firestore.collection('dunedinDistrict').get()
       .then(snapshot => {
       const dunedinDistrict = []
       snapshot.docs.forEach(doc => {
       dunedinDistrict.push(doc.data())
        })
       this.dunedinDistrict = dunedinDistrict
         })
      }

    }

我希望可以从Firebase提取市区数据，并在前端页面上渲染该数据，当用户单击组合框时，数据下拉列表会出现。

如何从Firebase提取Vue中组合框中使用的数组数据

0 个答案: