2019-09-21
How to pass particular color to parent component in Vue.js?
stackoverflow
Question

There are three key components in this case: Card (wrapper), Panels (parents for Sections, inside Card) and Sections (children for Panels, inside Panel each). Therefore, there is one Card and inside Card the same number of Panels and Sections (as I've said Sections are inside their own Panels).

The code looks as following:

1) Card:

<panel :collapsible="true" v-for="(item, key) in docSections" :key="key" :title="setSectionTitl(item)" :colorTitle="color">
  <template slot="body">
    <component
      :document="document"
      :sectionData="document.Sections[item]"
      :is="getSection(item)"
      :options="sectionOptions"
      @setColor="setColor"
    />
  </template>
</panel>

color: ''

methods: {
  setColor (color) {
    this.color = color
  }

As you can see we use dynamic component feature that can contain several Sections inside Panels.

2) Section(s):

mounted () {
  // setColor
  if (!this.sectionData.permitStart || !this.sectionData.permitFinish) {
    this.$emit('setColor', 'red')
  } else {
    this.$emit('setColor', 'black')
  }
}

3) Panel(s):

<h6
  :style="{ color: setTitleColor }"
  v-if="title"
  :title="title">
  {{ title }}
</h6>

props: {
  title: String,
  colorTitle: {
    type: String,
    default: ''
  }
  ...
}

computed: {
  setTitleColor () {
    if (this.colorTitle) {
      if (this.colorTitle === 'red') {
        return this.colorTitle
      } else {
        return 'black'
      }
    }
  }

How does it look like:

enter image description here

How do look components like in DevTools:

enter image description here

The Card is wrapper and inside it there are several Sections inside Panels (collapsible) each. I need to paint the Section's that is Panel's titles (because titles are in Panels) under some conditions. Those conditions are not in all Sections. If conditions are in Sections, paint it in red, if not keep default color.

The issue is all Panel's titles are red, but I haven't emitted from all Sections.

How to solve the issue that is paint in red only Panel's titles that contain Sections where I've emitted from?

Answer
1

You probably realized the issue already: Your event sets the color property of the Card component. The card component passes this one color property to all of its Panel children.

If you want to have an independent color property in each of your Panels, you have to

  1. either move the logic to your Panel and set the color there, or

  2. offer each child Panel in your Card it's own color value. You could achieve that by creating an array of colors and pass the right color (by index) to your Panes.

However, there is no need to make the detour through your Section at all to pass the color to your Panel. Just move the logic to your Card:

<panel :collapsible="true" v-for="(item, key) in docSections" :key="key" :title="setSectionTitl(item)" :colorTitle="getColor(item)">
  <template slot="body">
    <component
      :document="document"
      :sectionData="document.Sections[item]"
      :is="getSection(item)"
      :options="sectionOptions"
      @setColor="setColor"
    />
  </template>
</panel>

methods: {
  getColor(item) {
    const permitFinish = this.document.Sections[item].permitFinish;
    const permitStart = this.document.Sections[item].permitStart;
    return permitStart && permitFinish ? 'black' : 'red';
  }
}
How to pass particular color to parent component in Vue.js?
See more ...