Question

我正在使用Firestore检索一些我想在选择中填充的数据。

这是我的选择：

     <li>
        <div class="row container">
           <div class="input-field col s12">
             <select name="organizers" id="organizersSelector" v- 
                                         model="selectedOrganizer">
                    <option value="" disabled selected>Choose 
                                                  organizer</option>
                    <option v-for="organizer in organizers"
            v-bind:key="organizer.name" v-bind:value="organizer.name">{{organizer.name}}</option>
             </select>
             <label for="organizers">Organizers</label>
           </div>
       </div>
    </li>

因此，我在数据内部有一个organizers空数组：

  data() {
return {
  name: null,
  organizer: null,
  originalUrl: null,
  organizers: [],
  selectedOrganizer: null,
  ...
};

}，

然后，在创建页面时，我尝试到达Firestore集合，然后push对象进入相关集合：

created() {
db
  .collection("collection_name")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      this.organizers.push(doc.data());
    });
    alert("size = " + this.organizers.length + " ; name = " + 
             this.organizers[0].name);
  });
 }

正如我从alert中看到的那样，我的数组已填充，并且存在带有name属性的对象。不过，我的select向我显示了唯一的默认选项，按此按钮我找不到任何name。

如何在select回复后填充Firestore？

其他问题

我使用materializedcss来获得更好的UI，但是我不明白为什么我需要刷新页面才能激活预先填充的input。同样，我只能看到label的{{1}}，但是select本身不会呈现。刷新后会出现。

以下文档是在链接select

之后将其添加到“ index.html”中的

jQuery

我对JavaScript非常陌生。

Vue.js Firestore Fill动态选择

0 个答案: