Как связать метод, передав имя метода через переменную в @click

Question

Я все еще довольно новичок в vuejs и смотрел одно из многих видео онлайн, чтобы научить себя, когда мне в голову пришел вопрос.

С vuetify я создаю навигационный ящик, который зацикливается (v-for) через список пунктов меню и распечатывая детали пунктов с помощью v-if.

Теперь для вопроса, который у меня есть: в vuejs есть способ связать метод из vues 'методов', таких какsingOut() в @click, передав метод с переменной.

@click="item.method" и @click="{item.method}" не сработали для меня.

Уточнение: может быть больше методов, чемsingOut() Я бы хотел привязаться к @click.Поэтому я ищу более динамичный способ связывания метода.

Заранее спасибо:)

new Vue({
	el: '#app',
  data: {
  	items: [
      { icon: "lightbulb_outline", text: "Notes", path: '/tools/notes' },
      { icon: "access_alarm", text: "Worktime", path: '/tools/worktime' },
      { divider: true },
      { heading: "Labels" },
      { icon: "add", text: "Create new label" },
      { divider: true },
      { heading: "Account" },
      { icon: "lock_open", text: "Login", path: '/signin' },
      { icon: "mdi-account-plus", text: "Sign Up", path: '/signup' },
      { icon: "mdi-logout", text: "Sign Out", method: 'singOut()' },
      { divider: true },
      { icon: "settings", text: "Settings", path: '/' },
      { icon: "chat_bubble", text: "Trash", path: '/' },
      { icon: "help", text: "Help", method: 'sendAlert("Really want to delete?")' },
      { icon: "phonelink", text: "App downloads", method: 'sendAlert("Leaving the app")' },
      { icon: "keyboard", text: "Keyboard shortcuts", path: '/' }
    ]
  },
  methods: {
  	navigateTo(path) {
      if (path) {
        this.$router.push(path);
      } else {
        this.$router.push('/');
      }
    },
    singOut(){
      this.$store.dispatch('singOut');
    },
    sendAlert(msg) {
    	alert(msg);
    }
  }
});

ul {
  list-style: none;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="(item,i) in items">
      <span v-if="item.heading" :key="i"><b>{{item.heading}}</b></span>
      <span v-else-if="item.divider" :key="i">--------</span>
      <span v-else-if="item.method" @click="item.method" :key="i" style="cursor:pointer;">{{item.text}} (+ @click->Method)</span>
      <span v-else> {{item.text}} -> {{item.path}}</span>
    </li>
  </ul>
</div>

Answer 1

Codepen

Метод разбиения в свойствах имени метода и аргумента.Например, вы можете создать call метод, который будет вызывать переданную функцию с переданными аргументами @click="call(item.method, item.args)".

<v-btn v-for="item in items" :key="item.id" @click="call(item.method, item.args)">
  {{item.text}}
</v-btn>

items: [
  ...
  { id: 5, text: "5", method: "methodTwo", args: ["Another message", 123] },

methods: {
  call(method, args = []) {
    this[method](...args)
  },

При необходимости создавать пользовательские утверждения.
Есть ли недостатки в этом подходе?

Answer 2

Поскольку у вас уже есть singOut() в вашем methods: {}, в вашем html для @click, просто используйте @click="singOut(item.method)"

Ваш singOut() должен иметь возможность принимать параметры.

singOut(method) {
  // method here
  console.log(method)
}

---

Я думаю, это не то, чего вы хотите достичь, потому что ваш метод в объекте состоит из функций.

Использование ваших текущих данных:

items: [
  { icon: 'help', text: 'Help', method: 'Some method here', alert: 'Really want to delete?' }
]

ЧтоЯ предлагаю вам сделать следующее:

• Иметь другое свойство alert и задать для него строку.
• Привязать событие @click к методу с элементом в качестве параметров;используйте этот метод для запуска alert() со значением свойства alert.

Пример:

singOut(item) {
  // handle the alert if it exists
  if (item.alert) {
    this.sendAlert(item.alert)
  } 

  // handle the method value
  console.log(item.method)
}