javascript - 関数を vuejs の prop として渡す

Question

したがって、選択可能な行などを含むベース「TableComponent」を作成しています。このTableComponentは「ボタン」と呼ばれる小道具を取ります。
TableComponent は、ボタンが次のようなオブジェクトの配列であることを想定しています。

buttons: [{
    label: 'Manage Themes',
    click: () => {
        if(this.selectedRows.length) {
            this.$router.push({ name: 'ManagePageOptions', query: { concernable_type: this.type, concernable_ids: this.selectedRows.map(row => row.id).join(',') }});
        } else {
            alert('Please select 1 or more company or user');
        }
    }
}]

テーブル コンポーネントでは、次のように渡された内容に基づいてボタンの行が作成されます。

<b-button v-for="button in this.buttons" @click="button.click" :key="button.label"> {{ button.label }} </b-button>

問題は、ボタンのクリック機能では、「これ」が親コンポーネントを参照しているため、選択した行などにアクセスできないことです.

編集: 「これ」をクリック機能に渡すだけで解決することがわかりました。それが賢明かどうかは定かではありません。

buttons = [{
    label: 'Manage Pages',
    click: (vm) => {
        if(vm.selectedRows.length) {
            vm.$router.push({ name: 'ManagePageOptions', query: { concernable_type: vm.type, concernable_ids: vm.selectedRows.map(row => row.id).join(',') }});
        } else {
          alert(Lang('Please select 1 or more company or user'))
        }
    }
}];

TableComponent データ:

data() {
    return {
      selectedRows: [],
      m_this: this,
    };
  },

_

<b-button v-for="button in this.buttons" @click="button.click(m_this)" :key="button.label"> {{ button.label }} </b-button>