как сделать @нажмите в Vuetify динамический, основанный на JSON-объектов


как сделать @нажмите в Vuetify динамический, основанный на JSON-объектов

28.01.2020 02:47:53 Просмотров 95 Источник

У меня есть компонент, который показывает список. Этот список динамически заполняется страницами, использующими данный компонент. 

<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)} ?

javascript vue.js vuetify.js
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects#comment106016081_59948099
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects#comment106016104_59948099
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects#comment106016634_59948099
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects#comment106016684_59948099
@EmīlsGulbis Да, это не сработало.
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects#comment106017181_59948099
я говорю, что ваша функция принимает параметр, и я не знаю, что такое appId или откуда он берется, но его нужно передать

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

Patel Pratik

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

Источник
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects/59948372#comment106016654_59948372
это [имя] (), кажется, не работает. Я получаю синтаксические ошибки в Редакторе.
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects/59948372#comment106017391_59948372
Это работает сайт CodePen - сайт CodePen.Ио/Пратик__007/ручка/JjoVxbj?Редакторы=1010
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects/59948372#comment106017408_59948372
Вы также можете передать appId, если хотите
https://stackoverflow.com/questions/59948099/how-to-make-click-in-vuetify-dynamic-based-on-json-objects/59948372#comment106043252_59948372
По какой-то причине он не работает с классом TypeScript. :/
Estradiaz

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>
Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X