ローカルコンポーネントから最大値を計算する

Question

Vue.jsを初めて使用しています。ドキュメンテーションとLaracastから始まりました。 私は少し問題があります。私は "計算"したい、私の結果のどれが高いです。

例：

ユーザーのリストがあります。各ユーザーにいくつかのポイントを与えることができます。合計 - すべてのユーザーに対して15ポイント。私は一流のユーザーを獲得する必要があります。私は特別な方法を定義する必要があると私は知らない。 Vueインスタンスで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??? 
    } 
} 

は、あなたの計算されたプロパティは、実際に値を返す必要があります機能（計算値）です。 this.topUsersがあなたのtopList変数の計算値を持ち、どこでもあなたのVueのコンポーネントで、そこから

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 
    } 
} 

：のように単純であるべきこと、あなたの$theme->membersデータ構造に応じて、あなたのケースではhttps://vuejs.org/v2/guide/computed.html#Basic-Example

を参照してください。その反応性：this.membersが変更された場合、this.topUsersが再計算されます。