渲染时设置 vue-swatches 子组件的颜色

Question

我目前正在使用 VueJS 开发一个项目。

简单来说，我有一个项目列表，这些项目包含一个名为 color 的属性。

当我单击列表中的一项时，会出现该项的属性，因此color 属性由颜色选择器 (Vue Swatches) 显示。

问题是，我有一个父组件，其中调用了 colorpicker 组件，但这不是直接调用的 v-swatches 组件，它是一个自定义组件。

ColorPicker.vue（自定义子组件）

<template>
  <div>
    <v-swatches v-model="color" v-on="listeners"></v-swatches>
  </div>
</template>

<script>
import VSwatches from "vue-swatches";
import "vue-swatches/dist/vue-swatches.css";

export default {
  name: "e-colorpicker",
  components: { VSwatches },
  data() {
    return {
      color: "#1CA085"
    };
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: this.updateColorValue
      };
    }
  },
  methods: {
    updateColorValue(event) {
      this.$emit("input", event);
    }
  }
};
</script>

我在父组件中称这个自定义子组件：

EditPlanning.vue（父组件）

// This is just a little part of my parent component code
<e-colorpicker
  class="position-relative"
  v-model="selectedItem.color"
  :value="selectedItem.color"
  :key="selectedItem.color"
/>

当我在我的父页面中保存更改时，我调用一个调用 api (POST updateItem()) 的方法来更新我的数据库中的指定项目，这部分工作得很好。

然而，当我刷新页面时，即使我从数据库中成功获取了项目的更新属性颜色，自定义颜色选择器组件也没有获取和更新prop 颜色 渲染时。

注意：只有当我从父组件中的项目列表中选择项目时，才会呈现颜色选择器。所以我的父组件中有一个mounted 部分，它调用从api 获取数据的方法getItems()。

那么如何在子组件e-colopicker 渲染之前更新它的颜色属性？

编辑：

这是我的问题的图片：

选择颜色并保存

重新加载页面后

我希望在使用先前保存的选定颜色渲染颜色选择器时更新颜色。颜色在我的数据库中正确更新，只是在刷新页面上渲染时不更新颜色的组件。

Answer 1

要将颜色从父组件传递给子组件（e-colorpicker），您必须在子组件中定义一个prop。

props: ["color"],

将颜色从父级传递给子级：

<e-colorpicker
  class="position-relative"
  :color="selectedItem.color"
  :value="selectedItem.color"
  :key="selectedItem.color"
/>

然后将颜色绑定到v-model:

<v-swatches v-model="color" v-on="listeners"></v-swatches>

别忘了移除硬编码的颜色属性：

data() {
  return {
    color: "#1CA085"
  };
},

工作Sandbox。