I have a custom component that displays a dynamic list. Each page using this component can populate the list with different items.
<template>
<v-list
subheader
>
<v-subheader class="font-weight-black">Choose action</v-subheader>
<v-divider/>
<v-list-item
v-for="(item, i) in model.menu"
:key="i"
@click="item.action"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</template>
Additionally, here is the TypeScript class for this component.
<script lang="ts">
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(appId)' },
{ title: 'Title Two', action: '' },
{ title: 'Title Three', action: '' }
]
}
someModalAction( appId: string ) {
// show some modal here
}
</script>
The model object is designed to be passed as a dynamic Prop() by other pages using this component.
However, I encountered an issue where clicking on "Title One" does not trigger the expected action. By modifying the object to include this.someModalAction(this.appId), the modal successfully appears on page load. But after closing the modal, the list item becomes unresponsive.
How can I dynamically pass actions to the @click event handler?