[FIXED] How to let one component correspond with the other for a specific function

Issue

I've got a component where I click a color of a machine, when I change colors, the machine gets loaded with a different color inside a image carousel.

Now I also created a component in the bottom with a image gallery of the same machine. How can I make it that the image gallery also changes color when I click the color button in the top of the page?

Important notice: The two components are not in the same parent component but they do load in the same machine images already, so the methods are not wrong I believe.

this is the clickable color button:

 <li
            v-for="(color, index) in machine.content[0].machine_colors"
            :key="color.color_slug"
            v-if="color.inStock"
            v-on:click="selectColor(index)"
            v-bind:class="{ active: (color.color_slug === selectedColor.color_slug)}">
            <img v-bind:src="color.color_dash">
          </li>

this is the component that changes color:

<div class="product__carousel">
      <Carousel showIcon v-if="selectedColor" :machineColor="selectedColor"/> <!-- Image carousel gets loaded in -->
    </div>

and the component that needs to change color but does not:

<div id="tab-two-panel" class="panel">
           <footerGallery  v-if="selectedColor && machine" :machineColor="selectedColor"/>
      </div>

Heres the script of the partent component:

export default {
name: 'aboutMachine',
components: {
  Collapse,
  footerGallery,
},
data() {
  return{
    selectedColor: this.getMachineColorContent(),
  }
},
props: {
  main: {
    default () {
      return {};
    },
  },
  machine: {
    default () {
      return {};
    },
  },
},
 methods: {
getMachineColorContent() {
  if (this.selectedColor) {
    return null;
  }
  return this.machine.content[0].machine_colors[0];
},
selectColor(index) {
  this.selectedColor = this.machine.content[0].machine_colors[index];
},

}, } and the component itself:

export default {
name: 'footerGallery',
props: {
  showIcon: Boolean,
  machineColor: {
    default () {
      return {};
    },
  },
},
data() {
  return {
    highLightedThumbIndex: 0,
    isActive: undefined,
  };
},
created() {
  this.highLightedThumbIndex = this.highLightedThumbIndex || 0;
},
methods: {
  selectThumb(index) {
    this.highLightedThumbIndex = index;
  },
},

};

This is my main.js

import Vue from 'vue';
import VueYouTubeEmbed from 'vue-youtube-embed'

import FontAwesome from './libs/fa';
import App from './App';

const eventHub = new Vue();
Vue.use(VueYouTubeEmbed);
Vue.component('font-awesome-icon', FontAwesome);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

Solution

I would use events to accomplish this. The migration guide to Vue2 has a good short explanation of how to do simple event routing without using a full Vuex solution. In your case, you would declare a global event hub in one of your js files:

var eventHub = new Vue();

In your selectColor method you would emit the index selected:

selectColor(index) {
    this.selectedColor = this.machine.content[0].machine_colors[index];
    eventHub.$emit("select-color",index);
}

And in the footer, you would register a listener for the select-color event that calls selectThumb with the payload of the event (which is the selected index):

created() {
    this.highLightedThumbIndex = this.highLightedThumbIndex || 0;
    eventHub.$on("select-color",this.selectThumb);
}

Answered By - user3357118

Answer Checked By - Timothy Miller (PHPFixing Admin)