1๐
Just make one function for calling you function on click.
To use dynamic function call it is suggested to have a helper function
that receives the function name and call the corresponding function.
data () {
return {
test: '',
submitting: false,
list: [{
title: "One",
action: "itemClicked"
},
{
title: "Two",
action: "itemClicked2"
},
{
title: "Three",
action: "itemClicked3"
}
]
}
},
methods: {
itemClicked() {
alert('item clicked')
},
itemClicked2() {
alert('item clicked 2')
},
itemClicked3() {
alert('item clicked 3')
},
funcioncall(name){
this[name]();
}
}
codepen โ https://codepen.io/Pratik__007/pen/JjoVxbj?editors=1010
๐คPratik Patel
1๐
convert data with getter:
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { app } from 'electron'
@Component
export default class ListItem extends Vue {
@Prop() appStatus!: string
@Prop() appId!: string
model: any = {
menu: [
{ title: 'Title One', action: 'someModalAction' },
{ title: 'Title Two', action: '' },
{ title: 'Title Three', action: '' }
]
}
get items(){
return this.model.menu
.map(item => ({...item, action: item.action && () => this[item.action](this.appId)})
}
someModalAction( appId: string ) {
// show some modal here
}
<template>
<v-list
subheader
>
<v-subheader class="font-weight-black">Choose action</v-subheader>
<v-divider/>
<v-list-item
v-for="(item, i) in items"
:key="i"
@click="item.action"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</template>
๐คEstradiaz
- [Vuejs]-Trying to get row data onClick
- [Vuejs]-I need to unstructure an object to update the variables defined in data
1๐
v-list-item v-for="(item,index) in profileItems" @click="item.action" ripple="ripple"
:key="index">
{
icon: 'mdi-exit-to-app',
href: '/',
title: 'Logout',
action: () => {
this.onUserLogout()
}
},
]
๐คKamau Brian
- [Vuejs]-Display pictures dynamically with v-for
- [Vuejs]-How to use Math.round to round values returned from JSON object in Vue.js
Source:stackexchange.com