单击div上的event以获取innerText值，并使用event-bus将$emit发送到另一个不工作的组件

Question

我有一个div列表，其中包括我从API调用中获得的产品信息。在另一个组件/视图中，我想在单击div时显示单个产品信息。

所以我要做的是通过点击div时访问事件对象来检索产品id，然后将id存储在一个变量(而不是数据属性)中，然后使用event-bus对其进行$emit，然后在我的其他组件中侦听它，并使用该id进行API调用以获取该单个产品的信息。我不确定这是否是做我想做的事情的最好方法，但这是我现在想到的唯一方法。

然而，到目前为止，我已经得到了一些不同的错误，并且我的显示单个产品的组件没有呈现。

这是显示产品/div列表的组件

<template>
  <div>
    <div class="pagination">
      <button :disabled="disabled" @click.prevent="prev()">
        <i class="material-icons">arrow_back</i>
      </button>
      <span class="page-number">{{ currentPage }}</span>
      <button @click.prevent="next()">
        <i class="material-icons">arrow_forward</i>
      </button>
    </div>
    <div class="products">
      <div
        class="product"
        @click="getSingleBeer($event)"
        v-for="product in products"
        :key="product.id"
      >
        <h2 class="name">{{ product.name }}</h2>
        <div class="image">
          <img :src="product.image_url" />
        </div>
        <h3 class="tagline">{{ product.tagline }}</h3>
        <h3 class="first-brewed">{{ product.first_brewed }}</h3>
        <h3 class="abv">{{ product.abv }}%</h3>
        <p class="id">{{ product.id }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { eventBus } from "../main";

export default {
  name: "Products",
  data() {
    return {
      products: [],
      currentPage: 1,
      searchVal: ""
    };
  },
  created() {
    this.getBeers();

    eventBus.$on("keyword", val => {
      this.searchVal = val;

      this.getBeersForSearch();
    });
  },
  computed: {
    apiUrl() {
      return `https://api.punkapi.com/v2/beers?page=${this.currentPage}&per_page=16`;
    },
    apiUrlForSearch() {
      return `https://api.punkapi.com/v2/beers?page=${this.currentPage}&per_page=12&beer_name=${this.searchVal}`;
    },
    disabled() {
      return this.currentPage <= 1;
    },
    isFirstPage() {
      return this.currentPage === 1;
    }
  },
  methods: {
    async getBeers() {
      try {
        const response = await axios.get(this.apiUrl);

        this.products = response.data;

        console.log(response);
      } catch (error) {
        console.log(error);
      }
    },
    async getBeersForSearch() {
      try {
        this.currentPage = 1;

        const response = await axios.get(this.apiUrlForSearch);

        this.products = response.data;

        console.log(response);
      } catch (error) {
        console.log(error);
      }
    },
     getSingleBeer($event) {
      const id = parseInt($event.target.lastChild.innerText);
      eventBus.$emit("beer-id", id);
      this.$router.push({ name: "Beer" });
    }
  }
};
</script>

这是要显示单个选定产品信息的组件/视图。

<template>
  <div class="beer-container">
    <div class="description">
      <h2>{{ beer.description }}</h2>
    </div>
    <div class="img-name">
      <h1>{{ beer.name }}</h1>
      <img :src="beer.image_url" alt />
    </div>
    <div class="ingredients"></div>
    <div class="brewer-tips">
      <h2>{{ beer.brewers_tips }}</h2>
    </div>
  </div>
</template>

<script>
import { eventBus } from "../main";
import axios from "axios";

export default {
  name: "Beer",
  data() {
    return {
      beerId: null,
      beer: []
    };
  },
  created() {
    eventBus.$on("beer-id", id => {
      this.beerId = id;
      this.getBeer();
      console.log(this.beer);
    });
  },
  methods: {
    async getBeer() {
      try {
        const response = await axios.get(this.apiUrl);

        this.beer = response.data[0];

        console.log(response.data[0]);
      } catch (error) {
        console.log(error + "Eroorrrrrr");
      }
    }
  },
  computed: {
    apiUrl() {
      return `https://api.punkapi.com/v2/beers/${this.beerId}`;
    }
  }
};
</script>

到目前为止我遇到的一些错误:1-当我观察控制台日志时，api调用同时进行2-3次，而不是只进行一次。

GET https://api.punkapi.com/v2/beers/null 400
Error: Request failed with status code 400Eroorrrrrr
GET https://api.punkapi.com/v2/beers/null 400
Error: Request failed with status code 400Eroorrrrrr
GET https://api.punkapi.com/v2/beers/null 400
Error: Request failed with status code 400Eroorrrrrr

2-当我第一次点击div时，它会指向新的路由/组件，但我没有收到任何错误，并且在幕后似乎没有发生任何事情。3-我也收到了这个错误：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'innerText' of null"
And
TypeError: Cannot read property 'innerText' of null

我的router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Beer from "./views/Beer.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/beer",
      name: "Beer",
      component: Beer
    }
  ]
});

更新:我可以将数据传递到下一个组件，但当我第一次单击产品div时，没有发生任何事情，我只会被定向到下一个路由/组件，但数据不会被传递。当我返回并再次单击时(不刷新页面)，数据会被传递，但组件上不会呈现任何内容。

Answer 1

我相信你可以通过将你的@click改成：

@click="getSingleBeer(product.id)"

它应该为您传递id，所以您可以这样做：

getSingleBeer(beerId) {
    eventBus.$emit("beer-id", beerId);
    this.$router.push({ name: "Beer" });
}