CODEWITHSUNDEEP
javascriptvue.js
TITO
TITO

Reputation: 855

Parent onChange sets child property to true

Form (parent) component:

export default {
  template: `
    <form name="form" class="c form" v-on:change="onChange">
      <slot></slot>
    </form>`,
  methods: {
    onChange:function(){
      console.log("something changed");
    }
  }
};

and a c-tool-bar component (child) that is (if existing) inside the c-form's slot

export default {
  template: `
    <div class="c tool bar m006">
      <div v-if="changed">
         {{ changedHint }} 
      </div>
      <!-- some other irrelevant stuff -->  
    </div>`,
  props: {
    changed: {
      type: Boolean,
      default: false,
    },
    changedHint: String
  }
};

What I want to achieve is, that when onChange of c-form gets fired the function checks if the child c-tool-bar is present && it has a changedHint text declared (from backend) it should change the c-tool-bar's prop "changed" to true and the c-bar-tool updates itself so the v-if="changed" actually displays the changedHint. I read the vue.js docs but I don't really know where to start and what the right approach would be.

Upvotes: 1

Views: 220

Answers (2)

Nora
Nora

Reputation: 3261

You can use the two components like this:

<parent-component></parent-component>

You will be passing in the :changed prop a variable defined in the parent component in data(). Note the :, we are using dynamic props, so once the prop value is changed in the parent it will update the child as well. To change the display of the hint, change the value of the variable being passed in as prop to the child component:

export default {
  template: `
    <form name="form" class="c form" v-on:change="onChange">
      <child-component :changed="shouldDisplayHint"></child-component>
    </form>`,
  data() {
    return {
      shouldDisplayHint: false,
    };
  },
  methods: {
    onChange:function(){
      this.shouldDisplayHint = true; // change the value accordingly
      console.log("something changed");
    }
  }
};

Upvotes: 2

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13684

One simple way is to use $refs.

When you will create your child component inside your parent component, you should have something like: <c-tool-bar ref="child"> and then you can use it in your parent component code:

methods: {
    onChange:function(){
      this.$refs.child.(do whatever you want)
    }
  }

Hope it helps but in case of any more questions: https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs

Upvotes: 1

Related Questions