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

要使用动态函数调用，建议使用一个辅助函数来接收函数名称并调用相应的函数。

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

从模板上遍历项目时，您可以通过传递函数名称（如p

）来调用该函数

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

查看实际情况in jsfiddle

Answer 2

@click =“ [fuctionName]（$ event，index）”

示例：

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

Answer 3

您可以通过事件传递数据

，或者采用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 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中将动态函数名称传递给click事件

4 个答案: