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

Question

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


<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>

Answer 1

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

@click="render_comp(value)"

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

Answer 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);
    }
}

希望对您有所帮助。

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

How to assign same event listener to dynamically created buttons in Vue.js and pass object's value to it as parameter?

vue.js

routing

vue-component

vue-router