Element Ui 组件不会在 vue 组件道具更改时重新渲染

Question

我有一个父组件和多个子组件，它们使用相同的道具。这个 prop 是 element.js 中下拉菜单的键数组。 当孩子第一次渲染时，它们不包含任何数据。但是，一旦使用 vuefire 的键到达，孩子们就会得到下拉菜单项。但是，元素下拉菜单并未按应有的方式重新呈现。 但是使用 vue 开发工具，我可以看到下拉菜单条目已作为键传递。当 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，但我在文档中阅读了以下内容：

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

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

这里给出了类似的建议：

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

在您的示例中，父级的 data 中没有 options。这可能会使其无反应，从而导致您描述的症状。

Answer 2

为您的项目使用数据属性，并在加载选项后设置它们。

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

从 db.collection('ingredients') 返回的 promise 不是响应式的。

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