Фильтруйте и удаляйте реактивные данные.Vue.js - PullRequest
Новая
       30

Фильтруйте и удаляйте реактивные данные.Vue.js

0 голосов
/ 19 марта 2019

С локальными данными все работает нормально, но когда я получаю свои асинхронные данные, они начинают вести себя очень странно - когда я обновляю страницу, она показывает правильные данные в течение полсекунды, но затем меняется на некоторые случайные значения ...

Я пробовал оба способа получения асинхронных данных - все то же самое.

Я использую coffeescript, поэтому @ равно this.

Функция фильтра фильтрует данные по имени, передает отфильтрованный элемент в компонент и удаляет его из основного массива, поэтому функция фильтра для следующего компонента должна обрабатывать меньше элементов массива.

Родитель 

<template lang="pug">
.fetch
  h1 fetch
  Get(
    :data='filterReduce("repo-1")'
  )
  Get(
    :data='filterReduce("repo-2")'
  )
  Get(
    :data='filterReduce("repo-5")'
  )
</template>
<script lang="coffee">
import axios from 'axios'
import Get from '~/components/Get'
export default
  components: { Get }
  data: ->
    response: []

  asyncData: ->
    { data } = await axios.get 'https://api.github.com/users/username/repos'
    { response: data }

  # created: -> @getData()

  methods:
    # getData: ->
    #   data = await axios.get 'https://api.github.com/users/username/repos'
    #   @response = data.data

    filterReduce: (argName) ->
      getIndex = @response.findIndex( (index) -> index.name == argName )
      return @response.splice(getIndex, 1)[0]
</script>

Компонент 

<template lang="pug">
.get
  h1 get
  .div(v-if='data')
    p id: {{ data.id }}
    p name: {{ data.name }}
    p full_name: {{ data.full_name }}
  p(v-else) loading...
</template>
<script lang="coffee">
export default
  props: ['data']
  name: 'get'
</script>
...