Passing a Variable in vue.js Component Modal Window

Question

Initial question: I am using a modal window in vue.js, which is launched from the parent module with the following code:

    <button v-on:click="openModal">Begin</button>
    <Account v-if="showModal" :showModal=showModal></Account>

The openModal function consists of the following:

openModal () {
  this.showModal = true
}

The modal window, which consists of a vue component (named Account), is opening properly. However, I would like to pass a variable to my component as a parameter, but I am not sure how to implement this.

Modified code which answers my initial question. I have added the :var="var" props parameter to the Account module.

    <button v-on:click="openModal()">Begin</button>
    <Account v-if="showModal" :var="var" :showModal=showModal></Account>

And needed to also add the "var: variable" to the data:

data () {
 return {
   var: variable,
   showModal: false
 }
}

And, finally the props in the component:

props: ['var']

Have you considered reading Vue's Event Handling docs? Point being: v-on:clicked doesn't exist. You probably meant v-on:click ( shorthand: @click). — tao
– tao, Commented Apr 25, 2020 at 2:10
Actually, you have made me realized that the v-on:clicked is used to close my modal window (via a this.$emit('clicked') found in the child component) and not to launched my actual modal window. I have modified my question. Thank you. — JF0001
– JF0001, Commented Apr 25, 2020 at 2:25
Without more detail (a minimal reproducible example) your question cannot be answered. It's unclear where onChildClick is defined, what is clicked, when is it emitted and where you expect the data (to/from). — tao
– tao, Commented Apr 25, 2020 at 2:28
It seems like you want to know how to pass a prop, but you've done so with :showModal=showModal — Dan
– Dan, Commented Apr 25, 2020 at 2:31
Additional parameter where? What you call passing a parameter to a component is the very purpose of props. — Dan
– Dan, Commented Apr 25, 2020 at 2:54

Ah Dii · Accepted Answer · 2020-04-25 02:34:29Z

1

I'm not sure that you are trying pass data into the component or get data from the component.

If you are passing value to the component:

Vue.component('account', {
  props: ['data'],
  template: '<h3>{{ data }}</h3>'
})

<account data="some-value"></account>

If you are trying emit value out from the component:

Inside your component

<button v-on:click="$emit('onChildClick', 'some-value')">
  Click me
</button>

When you call your component

<Account v-if="showModal" :showModal=showModal v-on:onChildClick="getChildValue"></Account>

methods: {
  getChildValue: function (payload) {
    console.log(payload)
  }
}

You can learn more about pass data between components in this article, please visit https://www.smashingmagazine.com/2020/01/data-components-vue-js/

Hope this help.

answered Apr 25, 2020 at 2:34

Ah Dii

387 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing a Variable in vue.js Component Modal Window

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related