javascript - 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

计算属性仅根据内部状态计算。它们的特殊之处在于，只要它们所依赖的内部状态发生变化，它们就只需重新计算。他们不接受任何参数，因为这将使他们不仅仅依赖于你的状态的 react 性，这会破坏这种缓存机制。您可以使用计算属性来处理从 api 获取的数据并对其进行循环，但现在让我们忽略它。

正如评论中所指出的，您的方法的问题是您正在使用 forEach使用函数循环，并在内部函数中返回。外部函数不返回任何内容，因此返回值为 undefined 。有多种方法可以做到这一点，但我认为使用 Array.prototype.some 最适合您的情况。您向此方法传递一个函数，该函数将为您调用它的数组中的每个项目执行。整个事情返回true如果这些调用中的任何一个返回 true ，否则返回 false .

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

你会注意到我在这里返回了一个 bool 值。我这样做是因为你的函数被称为 XYZExists 。我们可以使用这个 bool 响应来输出模板中适当的内容。

  <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 slot 渲染一整行，而不仅仅是一个单元格。您需要用 <tr> ... </tr> 将其包围起来.

<小时/>

正如thanksd在下面评论的那样，如果模板被多次重新渲染，使用此方法可能会导致性能问题。毕竟，每次调用该方法时，它都会遍历整个数组，查找该数组中的每个项目。

相反，我们可以使用计算属性来准备数据。由于您只在已安装的 Hook 中分配数据一次，因此您的计算属性应该只计算一次。当然，你应该避免变异 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>