CODEWITHSUNDEEP
vue.jscomponentsvuetify.jstoggle
MBar
MBar

Reputation: 45

VUE Toggle child component element visibility

I am trying to toggle the visibility of an span element using v-if within a child component. I am basically trying to use the @click toggle (Vuetify) with $refs. Not very savvy with code, but my research has not yielded a solution.

PARENT

<v-switch 
  label="hide manufacturer" 
  @click="$refs.childComponent.hideManf()"
/>

<child-component ref="childComponent" />

components: {
  childComponent
}

CHILD COMPONENT

<span v-if="spanManf">Name to Hide</span>

data() {
    return {
        spanManf: true
    };
},
methods: {
        hideManf () {
        this.spanManf = !this.spanManf;
    }

Upvotes: 1

Views: 1683

Answers (1)

drocha87
drocha87

Reputation: 629

You should use props in your child component, and pass the data from the parent something like this.

<span v-if="visible">Name to Hide</span>

props: {
   visible: { type: Boolean, required: true }
}

And then in your parent

<child-compoent :visible="spanManf" />

<v-switch label="hide manufacturer" @click="spanManf = !spanManf" />

data() {
   return {
      spanManf: true,
   }
}

Upvotes: 2

Related Questions