时间戳

首页 > 解决方案 > 渲染时设置 vue-swatches 子组件的颜色

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

问题描述

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

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

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

问题是，我有一个父组件，其中调用了颜色选择器组件，但这不是直接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父组件中有一个部分，它调用getItems()从 api 获取数据的方法。

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

编辑：

这是我的问题的图片：

选择颜色并保存

已选颜色

重新加载页面后

没有选择的颜色

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

标签： vue.jsvue-component

解决方案

要将颜色从父组件传递到子组件 ( 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"
  };
},

工作沙箱。

推荐阅读