如何将动态函数名称传递给 Vue Js 中的点击事件

Question

有什么方法可以从参数中传递函数名吗？

类似这样的事情..

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="item.click(item.contactID)" >

</tr>

item.click 在呈现页面时未转换为相应的函数。正确的方法是什么，我们将不胜感激？

Answer 1

可以用事件传递数据

或者，使用 v-model 取一个只读输入字段

示例：

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="itemClick" >

</tr>  

new Vue({
  ...
  ...
  methods:{
    itemClick:function(event){
       console.log(event.target.value);
    }
  }
})

Answer 2

To use dynamic function call it is suggested to have a helper function that receives the function name and call the corresponding function.

handle_function_call(function_name) {
    this[function_name]()
},

并且在遍历项目时，您可以通过传递函数名称来调用该函数，例如

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

See it in action in jsfiddle

Answer 3

@click="[fuctionName]($event, index)"

示例：

<button v-for="(button,index) in items" @click="[fuctionNames[index]]($event, index)" > // consider fuctionNames array of Function Names.

Answer 4

所以我以某种方式做到了这一点。在父组件中你可以做

  --parent--
    <MenuButton type="navbar_login" icon="bx bx-lock-alt" title="Login" :operation="gotoLogin"></MenuButton>
    
    --script--
    
    methods: {
       gotoLogin(){
          this.$router.push('/login');
       }
      }
    --children--
     <button
          v-if="type == 'navbar_login'"
           class="font-semibold text-xl text-green-700 flex rounded px-2 transform transition hover:-translate-y-1 duration-150 "
           @click=buttonClickFunction(operation)
    
           >
          <div class="flex my-1">
            <div class="animate-bounce">
              <i :class="icon"></i>
              </div> <p class="text-sm">{{title}}</p>
          </div>
        </button>
--props---

props: {
    operation: Function,
  },
--method--
methods: {
    buttonClickFunction(op) {
      console.log('button click',op);
      op();
    }
  }

如何将动态函数名称传递给 Vue Js 中的点击事件

How to pass a dynamic function name to the click event in Vue Js

dynamicform

vue.js