vue. js создание свойства данных = к возвращаемому значению метода - PullRequest
Новая
       20

vue. js создание свойства данных = к возвращаемому значению метода

0 голосов
/ 24 марта 2020

Так что я пытаюсь назначить this.clean = this.cleaner.

Пропуск результатов - это массив из 20 объектов, которые я хочу отфильтровать. Я хочу массив объектов, которые имеют только допустимое значение poster_path и удалить те, которые не соответствуют этому требованию. Следовательно .filter (). 

  props: ['results'],
  data() {
    return {
      clean: []
    }
  },
  mounted() {
    this.clean = this.cleaner
  },
  methods: {
    cleaner() {
      return this.results.filter(o => o.poster_path !== null)
    }
  }

Проблема в использовании моего vue devtool Vue, похоже, не сохраняет значение this.cleaner. Я получаю {"_custom":{"type":"function","display":"<span>ƒ</span> bound cleaner()"}} для значения this.clean.

Если я пытаюсь использовать вычисленное значение, я получаю "(ошибка во время оценки)" в качестве значения this.clean.

Если я попытаюсь this.clean = this.cleaner(), он просто сохранит пустой массив.

Ответы [ 3 ]

1 голос
/ 24 марта 2020

просто назначьте функциональность функции следующим образом 

props: ['results'],
data() {
  return {
   clean: []
  }
},
mounted() {
  this.clean = this.results.filter(o => o.poster_path !== null)
}
1 голос
/ 24 марта 2020 
props: ['results'],
data() {
  return {
    clean: this.results.filter(o => o.poster_path !== null)
  }
},

Пожалуйста, попробуйте. Вы можете напрямую импортировать реквизиты в данные компонента.

1 голос
/ 24 марта 2020

Попробуйте этот фрагмент. Я думаю, ваш код может быть упрощен до: 

const mockData = [
  {
    name: 'abc',
    poster_path: 1
  },
  {
    name: 'def',
    poster_path: null
  }
]
Vue.component('foo', {
  props: ['results'],
  template: '<ul><li v-for="c in clean" :key="index">{{c.name}}</li></ul>',
  computed: {
    clean: function() {
      return this.results ?this.results.filter(o => o.poster_path !== null) : [];
    }
  }
})
var app = new Vue({
  el: '#app',
  data() {
    return { results: mockData }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Foo component: <foo :results="results"/>
</div>
...