Simple question. I have a router link inside a clickable table row. when I click the router link it triggers the #click event instead of triggering the router-link.
How can I fix this?
<tr v-for="(blabla, index) in data" #click="goToIssue(blabla.id)">
<td>{{ blabla.id }}</td>
<td>{{ blabla.username }}</td>
<td>{{ blabla.name }}</td>
<td>
<router-link
:to="'/project' + blabla.project.id"
>
Details
</router-link>
</td>
</tr>
To stop the click-event from bubbling to the parent, use a custom <router-link> that uses the stop event modifier on the underlying link's #click:
Apply the custom prop on the <router-link>.
In the <router-link>'s default slot, add an <a> with its href bound to the slot's href prop.
Also add a click-event handler that calls the slot's navigate prop (a function that navigates to <router-link>'s to prop). Also apply the .stop event modifier to the click-event listener to stop the event from propagating to the parent elements.
<router-link :to="'/project/' + blabla.project.id"
custom 1️⃣
v-slot="{ navigate, href }">
<a :href="href" 2️⃣
#click.stop="navigate" 3️⃣
>
Details
</a>
</router-link>
demo
Related
I am doing a project with VueJS and I need to the following:
Use an API & fetch a list of users in the home page.
When clicking on a user's button, I need to redirect to another component & output that user's details in that component (only the details of the user that I clicked).
Here is the table displaying the users info
<v-data-table hide-actions flat :headers="headers" :items="doctors">
<template v-slot:items="props">
<td>{{ props.index + 1 }}</td>
<td>{{ props.item.profile.full_name }}</td>
<td>{{ props.item.email }}</td>
<td>{{ props.item.username }}</td>
<td>{{ props.item.updated_at }}</td>
<td>
<v-btn outline small color="indigo" #click="view(props.item)">
<i class="fa fa-eye"></i> make payment
</v-btn>
</td>
</template>
<template v-slot:no-results>
<h6 class="grey--text">No data available</h6>
</template>
</v-data-table>
the view function is in the methods
view() {
window.open(`/finance/pay-doctors/${item.id}`, "_blank");
},
I have created a dynamic route
{ path: '/finance/pay-doctors/:id', component: DoctorDetails}
Am unable to create the DoctorDetails and show data
I recommend that you try with a router push initially.
Hence please use
<script>
export default {
methods: {
view(id) {
this.$router.push({ path: `/finance/pay-doctors/${item.id}` })
}
}
}
</script>
Make sure that your router is properly set + that you have the proper state thanks to your Vue devtools.
Also, be sure to have something to fetch the user's data on DoctorDetails.
I'm trying to build a webapp with Vue. I have a component that serves as a template and a vue where I use the template and fill it with props.
For this I have an array from which I retrieve data from :
<MyComponent :myArray="[{dataName: 'dataValue'}] />
It works fine usually but not when I try to pass the prop as a function argument.
In MyComponent :
<table>
<tr v-for="item in myArray" :key='item.id'>
<td>
<button #click="myFunction( {{ item.dataName }} )">ClickMe</button>
</td>
</tr>
</table>
I tried to pass the argument and to pass the entire function name + argument but neither worked.
What am I doing wrong ?
Thank you,
Nehrz
When I am clicking on View Button every button is getting spinned. Here is the code which I used to view payload. Though I am getting correct data after clicking button, button I want to know reasons why every button is getting loaded though I have clicked on only one View.
Here are the screenshots
Before Click
After Click
<v-data-table
:headers="headers"
:items="tasks"
class="elevation-1"
:loading="loading"
hide-actions
>
<template v-slot:items="props">
<td>{{ props.item.reason }}</td>
<td>{{ props.item.requestedBy.adminName }}</td>
<td>{{ new Date(props.item.createdAt).toLocaleString("en") }}</td>
<td class="layout px-0">
<v-btn
small
:loading="downloadingPayload"
#click="getPayload(props.item._id)"
>
View
</v-btn>
</td>
</template>
</v-data-table>
It is because you have the same data for all the elements.
:loading="downloadingPayload"
i guess you have something like this in your method
getPayload (item) { this.downloadingPayload = true }
need to have a downloadingPayload for each item and do something like
getPayload (item) {
item.downloadingPayload = true
}
and in the template
:loading="props.item.downloadingPayload"
I use v-for to render table rows
<table>
<tr v-for="(item, i) in data">
<td>
<button v-if="...">....</button>
<el-tooltipplacement="right">
<button v-if="..." >...</button>
<div slot="content">
<button #click="...">...</button>
<button #click="...">...</button>
</div>
</el-tooltip>
</td>
</tr>
</table>
The tooltip is a component of element ui,
the tooltip will display after hovering the button.
The table data is gotten by ajax call,
and there are several pages,
it will get the data by ajax call while turning page,
the problem occurs after turning page.
Some tooltip will not display after hovering,
I assumed the problem is doms don't re-render,
I used $forceUpdate() after ajax call,
but it had no effect.
If you can please help me out.
element ui Tooltip component and exmaple： https://element.eleme.io/#/en-US/component/tooltip
In the given link we can edit some columnn How to record/console those changes so that we can pass that changed data to other component Check link
<v-edit-dialogue> is used
Inline editing is achieved by using first the scoped slot of the <v-data-table /> component. Within the scoped slot, you use <v-edit-dialog /> component. And within the input slot of the edit dialog component, you use the <v-text-field /> component.
So, just bind to the input or change event of the text field component, and you have the hook you are looking for.
<v-data-table>
<template slot="items" slot-scope="props">
<td>
<v-edit-dialog>
{{ props.item.name }}
<v-text-field
slot="input"
v-model="props.item.name"
#input="onEditValueChanged" <---------
></v-text-field>
</v-edit-dialog>
</td>
</template>
</v-data-table>