title: passing function as prop in vuejs
body: <p>So i am creating a base "TableComponent", with selectable rows etc. This TableComponent takes a prop called "buttons". <br>
  The TableComponent expects the buttons to be an array of objects like this:</p>
  
  <pre><code>buttons: [{
      label: 'Manage Themes',
      click: () =&gt; {
          if(this.selectedRows.length) {
              this.$router.push({ name: 'ManagePageOptions', query: { concernable_type: this.type, concernable_ids: this.selectedRows.map(row =&gt; row.id).join(',') }});
          } else {
              alert('Please select 1 or more company or user');
          }
      }
  }]
  </code></pre>
  
  <p>And so in the table component, a row of buttons is created based on what is passed like so:</p>
  
  <pre><code>&lt;b-button v-for="button in this.buttons" @click="button.click" :key="button.label"&gt; {{ button.label }} &lt;/b-button&gt;
  </code></pre>
  
  <p>Problem is that in the buttons click function, "this" refers to the parent component, and so i don't have access to the selected rows etc.</p>
  
  <p><strong>EDIT:</strong>
  I have found that just passing "this" to the click function solves it. Not sure if it is wise though.</p>
  
  <pre><code>buttons = [{
      label: 'Manage Pages',
      click: (vm) =&gt; {
          if(vm.selectedRows.length) {
              vm.$router.push({ name: 'ManagePageOptions', query: { concernable_type: vm.type, concernable_ids: vm.selectedRows.map(row =&gt; row.id).join(',') }});
          } else {
            alert(Lang('Please select 1 or more company or user'))
          }
      }
  }];
  </code></pre>
  
  <p>TableComponent data:</p>
  
  <pre><code>data() {
      return {
        selectedRows: [],
        m_this: this,
      };
    },
  </code></pre>
  
  <p>_</p>
  
  <pre><code>&lt;b-button v-for="button in this.buttons" @click="button.click(m_this)" :key="button.label"&gt; {{ button.label }} &lt;/b-button&gt;
  </code></pre>