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

Question

我有一个 parent 组件和多个 child 组件，它们使用相同的 prop。该道具是 element.js 中下拉菜单的键数组。当 children 第一次渲染时，它们不包含任何数据。但是，一旦使用 vuefire 的键到达，children 就会获得下拉菜单项。但是，元素下拉菜单并未按应有的方式重新呈现。但是使用 vue 开发工具，我可以看到下拉菜单条目已作为键传递下来。当 vue 进行热重载时，由于文件更改，键将加载。加载条目后，我可以 select 条目并且一切正常。

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

parent

<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>

child

<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

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

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

从 db.collection('ingredients') 返回的承诺不是反应性的。

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

Answer 2

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

Make sure to create any property added to firestore in data as well

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

这里给出了类似的建议：

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

在您的示例中，您的父 data 中没有 options。这大概会留下它 non-reactive，导致您描述的症状。

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

Element Ui component is not rerendering on vue component prop change

javascript

vue.js

vue-component

vuejs2

element-ui