Как передать параметр функции с v-for в Vue? - PullRequest
Новая
       45

Как передать параметр функции с v-for в Vue?

0 голосов
/ 22 апреля 2020

Я пытаюсь передать параметр в функцию, просматривая элементы массива с помощью v-for. 

<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <h1 ref="y"></h1>
    </v-app-bar>
    <v-content>
      <router-view />
      <v-navigation-drawer v-model="drawer" class="x">
        <v-list-item
          v-for="item in items"
          :key="item.unidade"
          :to="item.link"
          :@click="change(item.method)"
        >{{item.unidade}}</v-list-item>
      </v-navigation-drawer>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    items: [
      { unidade: "IPE", link: "/ipe", method: "IPE" },
      { unidade: "DCSI", link: "/dcsi", method: "DCSI" },
      { unidade: "RT", link: "/rt", method: "RT" }
    ],
    drawer: false
  }),
  methods: {
    change(val) {
      console.log(val);
      this.$refs.y.innerText = val;
    }
  }
};
</script>
<style lang="stylus" scoped>
.x {
  position: absolute;
}
</style>

Я хочу, чтобы параметр в массиве элементов передавался методу change (val), давая каждому элементу v-list отдельный прослушиватель событий. Затем я хочу, чтобы h1 с ref = "y" изменил его текст в зависимости от элемента v-list, который я нажимаю. Но до сих пор я получаю в браузере ошибку «Ошибка при рендеринге:« Ошибка типа: невозможно установить свойство 'innerText' из неопределенного ""

1 Ответ

0 голосов
/ 22 апреля 2020

Вместо установки innerText для <h1> вы можете вместо этого связать innerText с реактивной переменной. Вы можете создать переменную в данных, которая будет хранить выбранный метод, а затем привязать его к innerText, используя синтаксис {{}}. Делать это таким образом было бы более подходящим для Vue лучших практик. Позвольте мне показать вам, что я имею в виду. 

<template>
  <v-app>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-spacer></v-spacer>
      <h1 ref="y">{{ selectedMethod }}</h1> 
    </v-app-bar>
    <v-content>
      <router-view />
      <v-navigation-drawer v-model="drawer" class="x">
        <v-list-item
          v-for="item in items"
          :key="item.unidade"
          :to="item.link"
          :@click="change(item.method)"
        >{{item.unidade}}</v-list-item>
      </v-navigation-drawer>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    items: [
      { unidade: "IPE", link: "/ipe", method: "IPE" },
      { unidade: "DCSI", link: "/dcsi", method: "DCSI" },
      { unidade: "RT", link: "/rt", method: "RT" }
    ],
    selectedMethod: '', // Initially blank
    drawer: false
  }),
  methods: {
    change(val) {
      this.selectedMethod = val; // Update the value of selectedMethod
    }
  }
};
</script>
<style lang="stylus" scoped>
.x {
  position: absolute;
}
</style>

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

...