Vuejs how to pass component data from caller

Question

My main page renders a list of data coming from controller with foreach

@foreach ($sales as $sale)
    <button id="{{$sale->id}}" @click="editClicked({{$sale}})">
@endforeach

I have an edit component placed on the page like this, I display it modally via showEditModal conditional

<edit v-if="showEditModal" @hide="showEditModal=false"></edit>

The component in brief is declared in Edit.vue:

<template name="edit">
    ...
</template>

This is simply a standard form with input fields, bound via v-model to the sale.

Essentially it is an update form, I intend to load the data from the main page into each input field to be edited.

My app.js simply sets showEditModal = true, in order to display the edit form on top of the main page.

Basically i don't want to have to call controller via GET method on loading the modal since i already have the data in the main page as $sale object, so im just wondering how do I pass in the $sale to the Edit.vue component ?

I thought that in the <edit> component usage, it would need to bind the sale object, however I'm unsure how that would work since it comes from the foreach loop.

I do, also have the data in the app.js method as passed in via @click="editClicked({{$sale}})", but again, i'm unsure how to use that to pass through ?

Bert Bert · Accepted Answer · 2017-06-24T07:20:31

You're right, you would want to pass the current sale item as a property to the edit modal. What I would do is add a data property to your main Vue called selectedSale.

data:{
  selectedSale: null
}

Then in your editClicked method, set selectedSale

methods:{
  editClicked(sale){
    this.selectedSale = sale
    ...
  }
}

Finally, pass it as a property.

<edit :sale="selectedSale" v-if="showEditModal" @hide="showEditModal=false"></edit>

Vuejs how to pass component data from caller

1 Answers