vueJS 2、JavaScriptをコンポーネントに動的にバインドする方法

debugcn 投稿 Dev

ステファン・パケ

テンプレート：

<template v-for="(item, i) in items">
          <v-divider
            v-if="item.divider"
            class="my-4"
            :key="i"
          ></v-divider>
          <v-list-tile
            :key="i"
            v-else
            :to="item.to"
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>

スクリプトセクション：

export default {
    name: 'sideMenu',
    data () {
      return {
        toggleKeyboardShortcuts: false,
        items: [
          { icon: 'add', text: 'Create new question', to: '/question' },
          { divider: true },
          { icon: 'lightbulb_outline', text: 'Notes', to: '#' },
          { icon: 'touch_app', text: 'Reminders', to: '#' },
          { divider: true },
          { icon: 'settings', text: 'Settings', to: '#' },
          { icon: 'help', text: 'Help', to: '#' },
          { icon: 'keyboard', text: 'Keyboard shortcuts', events: { 'click': this.toggleKeyboardShortcutsDialog.bind(this) } },
          { icon: 'phonelink', text: 'App downloads', to: '#' }
        ]
      }
    },... more stuff, but not relevant for this question

さまざまな属性を渡すことができ、物事は適切にレンダリングされますが、このリストの項目がクリックされた場合に実行するJavaScript関数を渡すと、惨めに失敗します。そして、ダイアログをトリガーするためにこの動作が必要です（ルーターを使用してページにアクセスすることは機能します）

mackmack

@clickは必要なトリガーですが、@ clickはコンポーネントで定義されたメソッドのみを呼び出すことができます。

したがって、簡単なダーティは、items配列のインデックス値を受け入れるメソッド内の関数であり、メソッド内から、必要な実際の関数を呼び出します。

説明がわかりにくいため、簡単なペンを作成しました：https：//codepen.io/anon/pen/QMpgGN？editors = 1111

html：

<div id="app">
  <template>
      <button v-for="(o, i) in items" @click="dynamicFunc(i)">
        {{ o.text }}
      </button>
  </template>
</div>

js :( vue-loaderなし）

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {
          text: "test",
          click: function() {alert("hi~")}
        }
      ]
    }
  },
  methods: {
    dynamicFunc(i) {
      this.items[i].click()
    }
  }
})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]