Vue.js 2 - vリストリピータの計算プロパティ

計算された列をテーブルに追加しようとしています（最後の3列を参照）。私は、レコードを正しく参照していない計算されたプロパティと関係があると感じています。私は何か簡単に欠けていると確信しています何か案は？ありがとうございました！Vue.js 2 - vリストリピータの計算プロパティ

はここでフィドルです：https://jsfiddle.net/0770ct39/2/

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Vue.js Tutorial | More Computed Properties</title> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    </head> 
 

 
    <body> 
 
    <div id="app" class="container"> 
 
     <div class="row"> 
 
      <table class="table table-hover"> 
 
       <thead> 
 
        <tr> 
 
         <th>Phase</th> 
 
         <th>Labour Budget</th> 
 
         <th>Labour Hours</th> 
 
         <th>Labour Cost Rate</th> 
 
         <th>Labour Cost</th> 
 
         <th>Overhead Cost</th> 
 
         <th>Net</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr v-for="record in records"> 
 
         <td>{{record.phase}}</td> 
 
         <td>{{record.labourBudget}}</td> 
 
         <td><input type="text" v-model="record.labourHours"></td> 
 
         <td><input type="text" v-model="record.labourCostRate"></td> 
 
         <td>{{record.labourCost}}</td> 
 
         <td>{{record.overheadCost}}</td> 
 
         <td>{{record.net}}</td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 

 
    <script> 
 
    var app = new Vue({ 
 
     el: '#app', 
 
     data: { 
 
     records: [ 
 
      {phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45}, 
 
      {phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42} 
 
     ] 
 
     }, 
 
     computed: { 
 
     labourCost: function(){ 
 
      return this.record.labourHours * this.record.labourCostRate; 
 
     }, 
 
     overheadCost: function(){ 
 
      return this.record.labourCost * 1.36; 
 
     }, 
 
     net: function(){ 
 
      return this.record.netRevenue-this.record.labourCost-this.record.overheadCost; 
 
     } 
 
     } 
 
    }) 
 
    </script> 
 
</html>

出典

2016-12-08 FirstRedPepper

あなたは、各行に独自のコンポーネントを作成し、これが機能するためにはそれにrecordを渡す必要があります。コンポーネントを作成したくない場合は、代わりにmethodsを使用できます。

あなたは、本質的に行うことができます：あなたはコンポーネントのルートを移動したい場合

methods: { 
    laborCost: function(record) { 
    return record.labourHours * record.labourCostRate 
    }, 
    ... 
}

その後、あなたはこのような何かをしたい（私はあなたがすべきだと思うもの）

{{ laborCost(record) }}

ようにそれを使用します。

<record v-for="record in records" :record="record"></record>

次に、計算されたプロパティをコピーしてそのコンポーネントに貼り付けると、e xpected。

出典

2016-12-08 19:12:34

ありがとうございました！私はあなたが提案したような方法でそれを働かせました！ https://jsfiddle.net/k72qkbtp/ これは最良のアプローチではないと仮定するのは正しいでしょうか？計算されたプロパティのようなデータをキャッシュしないため、コンポーネントアプローチを推奨する理由があります（そうでなければ、と列）？コンポーネントのアプローチに修正しようとしましたが、これまでのところ、何が欠けていますか？ https://jsfiddle.net/h1ujpft0/ – FirstRedPepper

私はコンポーネントビルを使用していると思います！ https://jsfiddle.net/sb0b36ju/ 何らかの理由でテンプレートをテーブルの上にスローします。それを修正する方法はありますか？また、パフォーマンス面での方法と比較して、これを行う最善の方法ですか？ – FirstRedPepper

私は最初の返信をタイプしていたので、ちょうど返答しました。これは正しいようです。テーブルをレンダリングするには、 ' –

計算されたプロパティ関数が機能しない理由は、thisキーワードがVueインスタンスを参照しているためです。あなたはこのようなあなたの計算された機能を変更した場合app変数は、あなたのVueのインスタンスを参照するため、例えば... ...

computed: { 
    labourCost: function() { 
    return app.record.labourHours * app.record.labourCostRate; 
    } 
}

...それはあなたが今持っているものと機能的に同等になります。 Vueのは、あなたの計算されたプロパティを処理するとき

だから、あなたの現在の状態で、それは「私はrecordsと呼ばれるものを見ますが、どれもrecordと呼ばないねえ！記録という名前のデータプロパティ！私は意味がありません」と言います。

このようにすべてのレコードの計算された配列を返すことをお勧めします。

var app = new Vue({ 
    el: '#app', 
    data: { 
    records: [ 
     {phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45}, 
     {phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42} 
    ] 
    }, 
    computed: { 
    rows: function() { 
     return this.records.map(function(record) { 
     return Object.assign({}, record, { 
      labourCost : record.labourHours * record.labourCostRate, 
      overheadCost : record.labourCost * 1.36, 
      net : record.netRevenue-record.labourCost-record.overheadCost 
     }); 
     }); 
    } 
    } 
})

その後

<tr v-for="record in rows">

NOTEにあなたのhtmlのループを変更：Object.assign()はES2015の事です。しかし、polyfillを使用することができます。または、lodashの_.assignやjQuery.extend()のような別のオブジェクトマージ関数を使用することもできます。

出典

2016-12-08 19:13:33 jessegavin

ありがとうございました！それはロード時の最初の列では機能しましたが、他の2つの列では機能しませんでした。値を変更すると更新されないようです。私はObject.assign polyfillを入れてみました - おそらく私はそれを正しく使用しませんでしたか？ https://jsfiddle.net/wt178zbz/ – FirstRedPepper

Vue.js 2 - vリストリピータの計算プロパティ

答えて

関連する問題