I have a vuejs sample where I am trying to dynamically change the button based on the data found in the vue model? So for instance, if the data says video in the returned data, I want the method to trigger and alert. If the data says another, I want it to display another message.

new Vue({
  el: "#app",
  data: {
    click:'video'
  },
  methods: {
    step1: function(){
        alert("click1")
    },
        step2: function(){
        alert("click2")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Checklist:</h2>
  <button v-on:click="step1()">
  Click 1
  </button> 
  
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try to use an inline handler with ternary operator :

 <button v-on:click="click==='video'?step1():step2()">