동일한 이벤트 수신기를 Vue.js에서 동적으로 생성된 버튼에 할당하고 개체 값을 매개 변수로 전달하는 방법?

동일한 이벤트 수신기를 Vue.js에서 동적으로 생성된 버튼에 할당하고 개체 값을 매개 변수로 전달하는 방법?

오브젝트 키에서 이름을 가져오는 단추를 동적으로 작성하려고 한다.그리고 내 코드 작업을 하기 위해서는 해당 값을 메소드에 전달해야 해.이 두 가지 작업을 모두 어떻게 하십니까?

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

당신 집에서는value노선이며key단추 레이블이다.그냥 경로만 통과하면 돼 (웃음)value)는 인수로서 다음과 같다.

@click="render_comp(value)"

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

패스 더valuefor loop(첫 번째 경우 "/floss"가 되는)에서 변수:@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는 그 다음에 그것에 접근할 수 있을 것이고, 그래서 그것은 여기에 전달될 수 있을 것이다.$175.1987로 기능 설정this.$router.push("/projects").

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

이게 도움이 되길 바래.

참조URL: https://stackoverflow.com/questions/60523437/how-to-assign-same-event-listener-to-dynamically-created-buttons-in-vue-js-and-p