Question

我正在使用Itunes rest api将数据获取到我的应用程序中，但我无法将数据获取到表中，其余api的结构如下：

{resultCount: 4, results: Array(4)}

到目前为止，我已经尝试了以下方法：

<div class="overflow-auto">
            <b-pagination
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="my-table"
            ></b-pagination>

            <p class="mt-3">Current Page: {{ currentPage }}</p>

            <b-table
              id="my-table"
              v-for="(result, index) in result"
              :key="index"
              :fields="fields"
              :per-page="perPage"
              :current-page="currentPage"
              small
            ></b-table>
          </div>

<script>
import List from "../components/myList.vue";

export default {
  name: "Hero",
  components: {
    List
  },
  data: function() {
    return {
      fields: [
        {
          key: "artistName",
          label: "Artist"
        },
        {
          key: "collectionName",
          label: "Song title"
        }
      ],
      title: "Simple Search",
      isActive: true,
      intro: "This is a simple hero unit, a simple jumbotron-style.",
      subintro:
        "It uses utility classes for typography and spacing to space content out.",
      result: [],
      errors: [],
      List: [],
      search: "",
      loading: "",
      message: false,
      isValidationAllowed: false,
      loadingClass: "loading",
      errorTextClass: "error-text",
      disableButton: false,
      perPage: 3,
      currentPage: 1
    };
  },

  watch: {
    search: function(val) {
      if (!val) {
        this.result = [];
      }
    }
  },

  computed: {
    validated() {
      return this.isValidationAllowed && !this.search;
    },
    isDisabled: function() {
      return !this.terms;
    },
    rows() {
      return this.result.length;
    }
  },

  methods: {
    getData: function() {
      this.isValidationAllowed = true;
      this.loading = true;
      fetch(`https://itunes.apple.com/search?term=${this.search}&entity=album`)
        .then(response => response.json())
        .then(data => {
          this.result = data.results;
          this.loading = false;
          /* eslint-disable no-console */
          console.log(data);
          /* eslint-disable no-console */
        });
    },

    toggleClass: function() {
      // Check value
      if (this.isActive) {
        this.isActive = false;
      } else {
        this.isActive = true;
      }
    },

    refreshPage: function() {
      this.search = "";
    },
    addItem: function(result) {
      result.disableButton = true; // Or result['disableButton'] = true;
      this.List.push(result);
      /* eslint-disable no-console */
      console.log(result);
      /* eslint-disable no-console */
    },

    resizeArtworkUrl(result) {
      return result.artworkUrl100.replace("100x100", "160x160");
    }
  },
  mounted() {
    if (localStorage.getItem("List")) {
      try {
        this.List = JSON.parse(localStorage.getItem("List"));
      } catch (err) {
        console.err(err);
      }
    }
  }
};
</script>

当我查看呈现的页面时，我只会得到[Object Object]，所以我没有瞄准正确的元素，或者它没有正确输入：以下代码在bootstrap vue分页和表格之外起作用。

<div v-for="(result, index) in result" :key="index">
            <div class="media mb-4">
              <img
                :src="resizeArtworkUrl(result)"
                alt="Album Cover"
                class="album-cover align-self-start mr-3"
              >
              <div class="media-body">
                <h4 class="mt-0">

                  <button
                    type="button"
                    class="btn btn-primary btn-lg mb-3 float-right"
                    v-on:click="addItem(result)"
                    :disabled="result.disableButton"
                  >
                    <font-awesome-icon icon="plus"/>
                  </button>

                  <b>{{result.collectionName}}</b>
                </h4>
                <h6 class="mt-0">{{result.artistName}}</h6>
                <p class="mt-0">{{result.primaryGenreName}}</p>
              </div>
            </div>
          </div>

任何帮助都会很好。

Answer 1

您的模板中有两个具有相同名称的变量：

<div v-for="(result, index) in result" :key="index">

尝试像这样更改result名称：

<div v-for="(item, index) in result" :key="index">
    <div class="media mb-4">
        <img
        :src="resizeArtworkUrl(item)"
        alt="Album Cover"
        class="album-cover align-self-start mr-3"
        >
        <div class="media-body">
        <h4 class="mt-0">

            <button
            type="button"
            class="btn btn-primary btn-lg mb-3 float-right"
            v-on:click="addItem(item)"
            :disabled="item.disableButton"
            >
            <font-awesome-icon icon="plus"/>
            </button>

            <b>{{item.collectionName}}</b>
        </h4>
        <h6 class="mt-0">{{item.artistName}}</h6>
        <p class="mt-0">{{item.primaryGenreName}}</p>
        </div>
    </div>
</div>

将其余api数据获取到Bootstrap Vue表和分页中

1 个答案: