Как назначить одного и того же прослушивателя событий динамически создаваемым кнопкам в 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-l oop, value - это маршрут, а key - это метка кнопки. Просто передайте маршрут (value) в качестве аргумента:

@click="render_comp(value)"

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

Answer 2

Передайте переменную value из for для l oop (который в первом случае будет "/ 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 получит доступ к нему, чтобы его можно было передать в него. $ Router.pu sh (), что делает функцию this.$router.push("/projects").

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

Надеюсь, это поможет.