将rest api数据导入引导Vue表和分页

Posted 2023-02-22

【中文标题】将rest api数据导入引导Vue表和分页

【英文标题】：Getting rest api data into bootstrap Vue table and pagination

【发布时间】：2019-11-10 20:10:29

【问题描述】：

我正在使用 Itunes rest api 将数据导入我的应用程序，我在将数据导入表时遇到问题，rest 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]，所以要么我没有针对正确的元素，要么它没有正确进入：以下代码在引导 vue 分页和表格之外工作。

<div v-for="(result, index) in result" :key="index">
            <div class="media mb-4">
              <img
                :src="resizeArtworkUrl(result)"
                
                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>

任何帮助都会很好。

【参考方案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)"
        
        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>