Question

有没有办法等到我的 teamId 数据更新后再打开bootstrap-vue模态？第一次单击以打开模态时， ModalResults 中的表为空白，第二次单击时，使用 teamId 正确填充了表数据。获取api调用。数据始终是点击的 teamId 的实际点击之后的一键。

父组件：

    <tr v-for="(item,i) in standings"
                :key="i"
                :class="defineColor(item)"
                @click="getTeamId(item.team.id)"
                v-b-modal="'modalId' + i">

<ModalContent :standings="standings" :teamId="teamId" />
...
data() {
    return {
      teamId: Number
    };
  },
methods: {
    getTeamId(teamId) {
      console.log("league Table: ", teamId);
      this.teamId = teamId;
    },

子组件ModalContent：

<template>
  <div>
    <b-modal :id="'modalId' + i" v-for="(item,i) in standings" :key="'teamDetails'+ i"> 
     <ModalResults :results="results" />
    </b-modal>
...

export default {
  name: "ModalContent",
  props: {
    standings: Array,
    teamId: [Function, Number]
  },
  components: { ModalResults },
  data() {
    return {
      results: []
    };
  },
  methods: {
    getResults(teamId) {
      getData.getTeamResults
        .get(teamId + "/matches?status=FINISHED")
        .then(response => {
          this.results = response.data.matches;
          console.log("this.results: ", this.results);
        })
        .catch(error => console.log(error));
    }
  },

  watch: {
    teamId() {
      let teamId = this.$props.teamId;
      console.log("teamId watched: ", teamId);
      teamId && this.getResults(teamId);
    }
  }
};

Answer 1

答案是在响应之后在get api请求中调用this.$bvModal.show(id)，以确保在打开模式之前teamId首先具有一个值。 bootstrap-vue modal

父项：

           <tr
            v-for="(item,i) in standings"
            :key="i"
            :class="defineColor(item)"
            @click="getTeamId(item.team.id, i)">

<ModalContent :standings="standings" :teamId="teamId" />

...

data() {
    return {
      teamId: Object
    };
  },

methods: {
    getTeamId(teamId, index) {
      let teamIdObj = {
        teamId: teamId,
        teamIndex: index
      };
      return (this.teamId = teamIdObj);
    },

在子组件中，观察对象prop，将其保存到数据中，然后使用this.$bvModal.show("modalId" + teamId.teamIndex);：

methods: {
    getResults(teamId) {
      getData.getTeamResults
        .get(teamId.teamId + "/matches?status=FINISHED")
        .then(response => {
          this.results = response.data.matches;
          console.log("this.results: ", this.results);
          console.log("getResults object: ", teamId);
          this.$bvModal.show("modalId" + teamId.teamIndex);
        })
        .catch(error => console.log(error));
    }
watch: {
    teamId() {
      this.teamId = teamId;
      console.log("teamId watched: ", this.teamId);
      this.getResults(this.teamId);
    }
  }

bootstrap-vue在数据更新为api调用之前打开

1 个答案: