Вычисление максимального значения из локальных компонентов

Question

Я новичок в Vue.js. Началось с документации и Laracasts. У меня есть небольшая проблема. Я хочу «вычислить», какой из моих результатов выше.

Пример:

У нас есть списки пользователей. Каждому пользователю может быть предоставлено несколько баллов. Всего - 15 баллов для всех пользователей. Мне нужно получить самых популярных пользователей. И я не знаю, где мне нужно определить специальный метод. Попробуйте инициализировать computed на Vue-экземпляре, но я застрял в том, как получаю дочерние свойства.

Мой вю-тег

<member v-for="member in members" :count=0 v-on:increment="incrementTotal" v-on:decrement="decrementTotal">@{{member.name}}</member> 

Вью инстанции:

var app = new Vue({ 
     props: ['counter'], 
     el: '.vue2', 
     data: { 
      members: {!! $theme->members !!}, 
      total: 15 
     }, 
     computed: { 
      **// In stuck with this** 
      topUsers() { 
       //this.members.filter??? 
      } 
     }, 
     components: { 
      'member': member, 
      'topRate': topRate, 
     }, 
     methods: { 
      incrementTotal: function() { 
       this.total -= 1 
      }, 
      decrementTotal: function() { 
       this.total += 1 
      } 
     } 
    }) 

компонент Член

var member = { 
     props: ['name'], 
     template: ` 
      <div class=''> 
       <li> 
        <slot></slot> 
        <button type="button" v-on:click="decrement" class='btn'>-</button> 
        <span>@{{counter}}<span> 
        <button type="button" v-on:click="increment" class='btn'>+</button> 
        <input type='hidden' :name=name :value=counter> 
       </li> 
      </div> 
     `, 
     **// for each User personal counter** 
     data: function() { 
      return { 
       counter: 0, 
      } 
     }, 
     **// increment/decrement user rating** 
     methods: { 
      increment: function() { 
       if (app.total !== 0){ 
        this.counter += 1; 
        this.$emit('increment'); 
       } 
      }, 
      decrement: function() { 
       if (this.counter !== 0){ 
        this.counter -= 1; 
        this.$emit('decrement'); 
       } 
      } 
     }, 
    } 

Спасибо за ваши ответы.

Answer 1

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

Пример

this.members.filter(function (member){ 
    return member.score>5; 
}); 

Или укоротить пример со стрелкой функциями

this.members.filter((member)=>member>5); 

Вот скрипка, что я надеюсь прояснить вещи для вас. https://jsfiddle.net/z11fe07p/501/

Answer 2

Начиная с вашего примера:

computed: { 
    **// In stuck with this** 
    topUsers() { 
     //this.members.filter??? 
    } 
} 

Ваше вычисленное свойство фактически функция, которая должна возвращать значение (вычисленное значение). См https://vuejs.org/v2/guide/computed.html#Basic-Example

В вашем случае, в зависимости от структуры данных $theme->members, которые должны быть столь же просто, как:

computed: { 
    topUsers: function() { 
     var topList = [] 
     for (var i = 0; i < this.members.length; i++) { 
      // build your topList as you would like it to be 
     } 
     // return that built list 
     return topList 
    } 
} 

Оттуда, где-нибудь в компоненте Вью, this.topUsers имеет вычисленное значение вашей topList переменной. И его реактивный: если this.members когда-либо изменится, this.topUsers будет пересчитан.