vue.js方法返回保持更新

Question

我是新来的Vue的js为愚蠢的问题非常抱歉。我使用的是V-数据表遍历阵列。我需要从方法返回没有改变，但这种方法运行时，它改变了每一行。

我曾尝试计算值，但由于某些原因，你可以一个变量未传递到计算领域？

<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>将其包围。

---

作为thanksd下面评论说，如果模板重新呈现大量使用这种方法可能会导致性能问题。毕竟，各方法被调用时，它看起来通过整个阵列，该阵列中的每一项。

相反，我们可以使用计算财产准备数据。因为你只有在安装钩子分配一次数据，您的计算机属性应该只计算一次。当然，你应该再回避变异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>