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

Question

I'm trying to create buttons dynamically whose names are fetched from keys of an Object. And I need to pass the corresponding value to the method to get my code work. How do you do both of these tasks?


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

Decade Moon · Accepted Answer · 2020-03-04 10:31:16Z

1

In your for-loop, value is the route and key is the button label. Just pass the route (value) as an argument:

@click="render_comp(value)"

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

answered Mar 4, 2020 at 10:31

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kaitrenbath · Accepted Answer · 2020-03-04 16:08:04Z

0

Pass the value variable from the for loop (which in the first case will be "/projects") as an argument of @click="render_comp(value)" handler so it can be used inside the function.

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

render_comp will then have access to it so it can be passed into this.$router.push(), making the function this.$router.push("/projects").

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

Hope this helps.

edited Mar 4, 2020 at 16:08

answered Mar 4, 2020 at 11:10

kaitrenbath

2011 silver badge3 bronze badges

2 Comments

kaitrenbath Over a year ago

Yes, no problem. You're passing the value variable from the for loop (which in the first case will be "projects") as a parameter of your render_comp function so you can use it inside the function. render_comp will then have access to it so it can be passed into this.$router.push().

Nico Haase Over a year ago

Please edit your answer to contain such information - don't use the comment section for this

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related