Change a html attribute vue.js

Question

I have the following line in my html page:

<button onclick={{button1}}>Vote</button>

and I want to know if I can dynamically change the attribute {{button1}} with vue.js (every time I reload the page, I want to change what function is executed when that button is pressed).

I was able to change other html elements but I have no clue how I can change this attribute.

The button is placed in a table, and the table is on a div with the id app.

Answer 1

You can't call method with dynamic name from template, instead, create a function to handle the dynamic function call on your Vue component, and add @onclick event to call that function

<template>
  <div>
    <br />
    <!-- Will call function named "one" -->
    <button @click="callFunctionWithName('one')">Calling function one</button>
    <br />
    <!-- Will call function named "two" -->
    <button @click="callFunctionWithName('two')">Calling function two</button>
    <br />
    <!-- Will call function named "three" -->
    <button @click="callFunctionWithName('three')">
      Calling function three
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    callFunctionWithName(functionName) {
      console.log("Calling function : ", functionName);
      this[functionName]();
    },
    one() {
      alert(1);
    },
    two() {
      alert(2);
    },
    three() {
      alert(3);
    }
  }
};
</script>