Vue

by Roland Doda

HTML

<div id="app">

<h3>Open console to see function calls</h3>

  <div class="buttons">
    <button v-for="button of items" :key="button.id" @click="handle_function_call(button.fn_name)">
      {{ button.text }}
    </button>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    items: [
      { id: 1, fn_name: 'add_function', text: 'Add function' },
      { id: 2, fn_name: 'delete_function', text: 'Delete function' },
      { id: 3, fn_name: 'edit_function', text: 'Edit function' }
    ]
  },
  methods: {
  	handle_function_call(function_name) {
    	this[function_name]()
    },
    add_function() { console.log('ADD FUNCTION CALLED') },
    delete_function() { console.log('DELETE FUNCTION CALLED') },
    edit_function() { console.log('EDIT FUNCTION CALLED') },
  }
})