Level 104
What is the other component?
Jul 26, 2022
16
Level 4
How to show single table record on other view?
i have a table where i fetch some data from db using laravel and dislpay this data on vue table line below.
<table class="table table-hover align-middle mb-0">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-for="atr in column">
{{atr}}
</td>
<td>
<a @click="showLead(column.id)" class="btn btn-sm btn-info">
<i class="fa-solid fa-eye"></i>
</a>
<button @click="editLead(column.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-pen-to-square"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
I want to do 2 function more. One for single record to show extended , i mean i need to see every single record of table in another view(i dont want to use modal for this) . Then i have created this showLead(column.id) to see each record data. But i dont know how to pass this data on another component and to display this component on view
//show single table record
showLead(id) {
axios.get('/leads/'+id)
.then(response => {
console.log(response)
})
},
in console i can see exactly data of rexord click to show.
Level 4
@tykus other component will be ShowLeadComponent.vue. Just a component to see this record in extended way.
Hope you understand what i am trying to do
Level 104
@Leon012 is that ShowLeadComponent on the same page?
Level 4
@tykus No, i want to load another page. I mean when i want to show single record extended, to display on another page this record
Level 104
@Leon012 use an anchor tag and GET the other page (fetching the data there); or, are you using Vue Router?
Level 4
@tykus I am new on vue, this is the first project and i dont know how to use anchor tag .
are you using Vue Router?
No i am not using Vur Router
Level 104
@Leon012 an anchor tag is an a element:
<a href="/path/to/other/page">Go</a>
Level 4
@tykus but i want just to load another component not to create another route
Level 104
@Leon012 But the other component is on another page - that means a new Request
Level 4
@tykus But how can i load just another component in same page
Level 104
Level 4
@tykus I'm sorry because I didn't know how to explain it. I want like this
But how can i load just another component in same page
Level 104
@Leon012 something like this:
<other-component v-if="lead" :lead="lead" />
data: () => {
return {
lead: null
}
},
methods:
showLead(id) {
axios.get('/leads/'+id)
.then(response => this.lead = response.data)
},
}
Level 4
@tykus Thanks for that, it works. But what about to edit singe record from this table
Level 104
Thanks for that, it works
Mark this thread solved then 👍
what about to edit singe record from this table
A new component; a form, data-binding, XHR request, route, controller action etc.
Level 4
@tykus I have posted new thread for this, it is a bit complicated can you take a look https://laracasts.com/discuss/channels/laravel/vue-js-3-edit-single-record-form-table
Please or to participate in this conversation.