如何为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

在循环中，value是路径，key是按钮标签。只需将路线（value）作为参数传递：

@click="render_comp(value)"

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

Answer 2

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

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