Question

我有一个父组件和多个子组件，它们使用相同的道具。该道具是element.js中下拉菜单的键数组。当子项第一次渲染时，它们不包含任何数据。但是，一旦使用vuefire到达了按键，孩子们就会获得下拉菜单项。但是，元素下拉菜单未按原样重新呈现。但是，使用vue dev工具，我可以看到下拉菜单项已作为键传递给了。当vue进行热重载时，由于文件更改，将加载密钥。加载条目后，我可以选择该条目，然后一切都会按预期进行。

使用vuetify下拉菜单和HTML下拉菜单，我也得到了相同的结果。两者都有相同的问题。

父母

<template>
  <div class="setup">
    <h1>Setup</h1>
    <div class="selectIngredients" v-for="number in 6">
      <setupSelection :bottle="number" :ingredients="options" />
    </div>
  </div>
</template>

<script>
import {db} from "@/firebaseConfig"
import setupSelection from '@/components/setupSelection';
export default {
  components: {
    setupSelection,
  },
  firestore: {
    options: db.collection('ingredients'),
  },
};
</script>

孩子

<template>
  <div class="ingredientSelector">
    <h3>Select for Pump <span>{{bottle}}</span></h3>
    <el-select v-model="selected" clearable placeholder="Select" >
      <el-option
        v-for="ingredient in ingredients"
        v-bind:key="ingredient.text"
        v-bind:label="ingredient.text"
        v-bind:value="ingredient">
      </el-option>
    </el-select>
     <!-- <v-select
        v-model="selected"
        :items="ingredients"
        label="Select a favorite activity or create a new one"
      ></v-select> -->
    <!-- <select v-model="selected" v-for="ingredient in ingredients">
      <option :value="ingredient.value">{{ingredient.text}}</option>
    </select> -->
  </div>
</template>

<script>
import {db} from "@/firebaseConfig";
export default {
  props: {
    ingredients: { required: true },
    bottle: { type: Number, required: true },
  },
  data() {
    return {
      selected: ''
    }
  },
  },
};
</script>

我希望客户端收到后，下拉菜单也会更新。

谢谢！

Answer 1

我自己没有使用过Vuefire，但我在文档中阅读了以下内容：

请确保还要在firestore中创建添加到data的任何属性

https://github.com/vuejs/vuefire/tree/master/packages/vuefire#firestore-option

此处提供了类似的建议：

https://vuefire.vuejs.org/vuefire/binding-subscriptions.html#declarative-binding

在您的示例中，父母的options中没有data。据推测，这会使它无反应，从而导致您描述的症状。

Answer 2

为项目使用数据属性，并在加载选项后进行设置。

data() {
    return {
      options: []
    }
  },
created() {
   db.collection('ingredients').then(data=> this.options = data}
}

从db.collection（'ingredients'）返回的诺言没有反应。

一种更好的方法是设置选项：null，并显示一个加载指示器，直到它是一个数组为止。

元素Ui组件不会在vue组件属性更改时重新呈现

2 个答案: