vue.js方法返回不斷更新

Question

我是Vue js的新手，對不起這個愚蠢的問題。 我正在使用v-data-table遍歷數組。 我需要一個方法的返回值不要改變，但是當該方法運行時，它的每一行都會改變。

我已經嘗試過計算值，但是由於某種原因您無法將變量傳遞到計算字段中？

<template>
  <div>
    <v-data-table
      :items="responseData"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td :key="props.item.tmdbId" class="text-xs-right">
          This: {{checkMovieExists(props.item.tmdbId)}}
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      allMovies: []
    };
  },
  mounted() {
    axios.get("XXXX")
      .then(response => (this.allMovies = response.data)) 
  },
  methods: {
    checkMovieExists(strMovieTmdbId){
      this.allMovies.forEach(movie => {
        if (movie.tmdbId == strMovieTmdbId) {
          return "Exists"
        }
      });                
    }
  }
}
</script>

Answer 1

計算的屬性僅基於內部狀態進行計算。 它們的特殊之處在於，只要更改它們所依賴的內部狀態，就必須重新計算它們。 他們不接受任何參數，因為這將使他們更多地依賴於狀態的反應性，從而破壞了這種緩存機制。 您可以使用計算屬性來處理從api獲取的數據並對其進行循環，但是現在暫時忽略它。

如注釋中所指出的，您的方法的問題是您正在使用帶有函數的forEach循環，並在內部函數中返回。 外部函數不返回任何內容，因此返回值是undefined 。 有幾種方法可以執行此操作，但是我認為使用Array.prototype.some可以達到最佳效果。 您向該方法傳遞一個函數，該函數將針對您要對其調用的數組中的每個項目執行。 如果這些調用中的任何一個返回true ，則整個事情返回true ，否則返回false 。

movieExists(strMovieTmdbId){
  return this.allMovies.some(movie => movie.tmdbId === strMovieTmdbId);
}

您會注意到我在這里返回一個布爾值。 我這樣做是因為您的函數稱為XYZExists 。 我們可以使用此布爾響應在模板中輸出適當的內容。

  <template slot="items" slot-scope="props">
    <td :key="props.item.tmdbId" class="text-xs-right">
      This: {{ checkMovieExists(props.item.tmdbId) ? 'Exists' : '' }}
    </td>
  </template>

---

就作用域插槽的使用而言，只要this.allMovies類似於：

[
  {
    tmdbId: 1
  },
  {
    tmdbId: 2
  }
]

請記住， items插槽會呈現整行，而不僅僅是一個單元格。 您將需要用<tr> ... </tr>包圍它。

---

如下面的感謝評論所述，如果大量重新渲染模板，則使用此方法可能會導致性能問題。 畢竟，每次調用該方法時，它都會針對該數組中的每個項目遍歷整個數組。

相反，我們可以使用計算屬性來准備數據。 由於在掛接的掛鈎中只分配一次數據，因此您的計算屬性僅應計算一次。 當然，您應該避免對this.allMovies進行this.allMovies以防止重新計算您的計算屬性。

您可以保留我們之前創建的方法，但是我們不會使用this.allMovies呈現數據，而是將使用此方法來計算數據...一次。 我們使用地圖來創建一個額外的屬性，其中包含方法的結果。

computed: {
  preparedData () {
    return this.responseData.map(
      row => {
        return {
          ...row,
          exists: this.movieExists(row.tmdbId)
        }
      }
    );
  }
}

現在，我們不再使用responseData （無論如何），而是使用preparedData來呈現表。 因為我們現在有一個預先計算的財產exists於每一行，我們只要檢查props.item.exists ，而不必調用函數。 當模板被重新描繪，只要responseData保持不變，我們使用的緩存版本preparedData 。

<v-data-table
  :items="preparedData"
  class="elevation-1"
>
  <template slot="items" slot-scope="props">
    <td :key="props.item.tmdbId" class="text-xs-right">
      This: {{ props.item.exists ? 'Exists' : '' }}
    </td>
  </template>
</v-data-table>