Как рендерить данные (только с type=3)?

Question

В data() у меня лежат orders

Как потом "рендерить" результат выполнения этой функции

getType3Orders() {
    this.orders=this.orders.filter(item => item.type===3)
}

Answer 1

Допустим:

В data() у меня лежат orders

Вывести некоторые из этих данных можно путем встраивания выражения в шаблон:

<div id="app">
   {{ orders.filter(item => item.type===3) }}
</div>

либо воспользовавшись вычисляемым свойством из computed:

computed: {
  getType3OrdersComp() {
    return this.orders.filter(item => item.type === 3)
  }
 }

либо воспользовавшись методом из methods:

methods: {
  getType3OrdersFunc() {
   return this.orders.filter(item => item.type === 3)
  }
 }

Каждый способ имеет свои особенности и это следует учитывать при выборе способа вывода данных.

Привожу пример всех трех способов

new Vue({
  el: "#app",
  data: {
    orders: [{
        id: 1,
        type: 1,
      },

      {
        id: 2,
        type: 2,
      },

      {
        id: 3,
        type: 3,
      }
    ]
  },
  computed: {
    getType3OrdersComp() {
      return this.orders.filter(item => item.type === 3)
    }
  },
  methods: {
    getType3OrdersFunc() {
      return this.orders.filter(item => item.type === 3)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  {{ orders.filter(item => item.type===3) }}
  <hr> {{ getType3OrdersComp }}
  <hr> {{ getType3OrdersFunc() }}
</div>

БЛОГ НА HUSL

Как рендерить данные (только с type=3)?

Ответы (1 шт):