如何将相同的事件侦听器分配给 Vue.js 中动态创建的按钮并将对象的值作为参数传递给它？

Posted 2023-02-23

【中文标题】如何将相同的事件侦听器分配给 Vue.js 中动态创建的按钮并将对象的值作为参数传递给它？

【英文标题】：How to assign same event listener to dynamically created buttons in Vue.js and pass object's value to it as parameter?

【发布时间】：2020-06-16 18:58:57

【问题描述】：

我正在尝试动态创建按钮，其名称是从对象的键中获取的。而且我需要将相应的值传递给该方法以使我的代码正常工作。您如何完成这两项任务？

<template>
  <v-app>
    <router-view></router-view>
    <v-app-bar app dense id="abc" dark>
      <v-icon>note_add</v-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        v-for="(value, key) in button_redirect_to"
        :key="key"
        @click="render_comp()"
      > key </v-btn>
      <v-btn depressed fab small>
        <v-icon>notifications</v-icon>
      </v-btn>
    </v-app-bar>
  </v-app>
</template>

<script>
export default 
  name: "Navbar",
  data() 
    return 
      button_redirect_to: 
        Projects: "/projects",
        Requests: "/requests",
        Reports: "/reports",
        Resources: "/resources",
        temp: "/temp"
      ,
      pers_actions: ["Profile", "LogOut"]
    ;
  ,
  methods: 
    render_comp() 
      this.$router.push();
    
  
;
</script>

【参考方案1】：

在你的 for 循环中，value 是路由，key 是按钮标签。只需将路由 (value) 作为参数传递：

@click="render_comp(value)"

methods: 
  render_comp(to) 
    this.$router.push(to);
  

【参考方案2】：

从 for 循环中传递 value 变量（在第一种情况下将是“/projects”）作为 @click="render_comp(value)" 处理程序的参数，以便可以在函数内部使用它。

<v-btn
    v-for="(value, key) in button_redirect_to"
    :key="key"
    @click="render_comp(value)"
>
     key 
</v-btn>

render_comp 然后可以访问它，因此可以将其传递给 this.$router.push()，从而生成函数 this.$router.push("/projects")。

methods: 
    render_comp(value) 
        this.$router.push(value);
    

希望这会有所帮助。

【讨论】：

是的，没问题。您从 for 循环（在第一种情况下将是“项目”）中传递 value 变量作为您的 render_comp 函数的参数，以便您可以在函数中使用它。然后 render_comp 将有权访问它，因此可以将其传递给 this.$router.push()。

请编辑您的答案以包含此类信息 - 不要为此使用评论部分