как сделать @нажмите в Vuetify динамический, основанный на JSON-объектов
У меня есть компонент, который показывает список. Этот список динамически заполняется страницами, использующими данный компонент.
<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>
А это класс машинописи.
<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>
Здесь model
(это только пример здесь).
Когда я нажимаю на заголовок один, ничего не происходит. Однако, когда я изменяю объект на
Prop()
Затем я могу видеть модальный режим, когда страница загружается. Когда я закрываю этот режим, элемент списка не может быть нажат тогда.
Итак, как я могу динамически передавать действия в {title: 'Title One', action: this.someModalAction(this.appId)}
?





Ответы - как сделать @нажмите в Vuetify динамический, основанный на JSON-объектов / how to make @click in Vuetify dynamic based on JSON objects

28.01.2020 03:03:48
Просто сделайте одну функцию для вызова функции по щелчку мыши.
Для использования динамического вызова функции предлагается иметь вспомогательную функцию тот получает имя функции и вызывает соответствующую функцию.
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





28.01.2020 03:27:37
преобразование данных с помощью геттера:
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>