Saat ini saya sedang mengerjakan proyek menggunakan VueJS.

Sederhananya, saya memiliki daftar item, item ini berisi properti bernama color.

Ketika saya mengklik salah satu item dari daftar, properti item muncul, dan properti color ditampilkan oleh colorpicker (Swatch Vue).

Masalahnya, saya memiliki komponen induk di mana komponen colorpicker dipanggil, tetapi ini bukan komponen v-swatches yang dipanggil, ini adalah komponen yang disesuaikan.

ColorPicker.vue (Komponen Anak yang Disesuaikan)

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

Dan saya menyebut komponen anak yang disesuaikan ini dalam komponen induk:

EditPlanning.vue (Komponen Induk)

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

Ketika saya menyimpan perubahan di halaman induk saya, saya memanggil metode yang memanggil api (POST updateItem()) yang memperbarui item yang ditentukan dalam database saya dan bagian ini berfungsi dengan baik.

Namun, ketika saya menyegarkan halaman saya meskipun saya berhasil mengambil dari database warna properti item yang diperbarui, komponen colorpicker yang disesuaikan tidak mendapatkan dan memperbarui prop warna saat merender.

Catatan: Render colorpicker hanya ketika saya memilih item dari daftar item yang saya miliki di komponen induk saya. Jadi saya memiliki bagian mounted di komponen induk saya, yang memanggil metode getItems() yang mengambil data dari api.

Jadi bagaimana saya bisa memperbarui properti warna komponen anak saya e-colopicker tepat sebelum dirender?

EDIT:

Berikut adalah gambar dari masalah saya:

Memilih warna dan menyimpannya

Selected color

Setelah memuat ulang halaman

no selected color

Harapan saya adalah agar warna diperbarui saat merender colorpicker dengan warna terpilih yang disimpan sebelumnya. Warna diperbarui dengan benar di database saya, hanya komponen yang tidak memperbarui warna saat merender pada halaman yang disegarkan.

1
SkydersZ 9 Juli 2020, 02:01

1 menjawab

Jawaban Terbaik

Untuk menurunkan warna dari komponen induk ke komponen turunan (e-colorpicker), Anda harus mendefinisikan rel topang di komponen turunan.

props: ["color"],

Mewariskan warna dari orang tua ke anak:

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

Kemudian ikat warna ke v-model:

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

Dan jangan lupa untuk menghapus properti warna hard-code:

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

Berfungsi Kotak Pasir.

0
Shaya Ulman 9 Juli 2020, 11:18