2017-01-17 10 views
0

Vue.jsを使用して配列とオブジェクトを作成しましたので、それらを「選択」配列にまとめることができます:Vue.js 2.0のオブジェクトと配列からオブジェクトを作成

selection[ 
{food: Chicken, quantity: 3}, 
{food: Rice, quantity: 2}, 
{food: Pasta, quantity: 1} 
]; 

私はそれを行うことができるように、以下を設定している:

var selection = [] 

    for (var i = 0; i < meals.length; i++) { 
     selection.push({ 
      food: this.meals[i], 
      quantity: creditsPerMeal[meals[i]] 
     }); 
    }, 

それは私が構文エラーを取得していますが、私は、私は一部としてデータをこれを行うべきであると確信していないです立っています。私はかなり近いと感じています。あなたはどのように私はそれような方法で結合するであろう、もしI入力creditsPerMealアップデートが、選択のdoesnt下の画像からわかるように

<template> 
    <div> 
    <div>Credits carried through: {{ credits }}</div> 
    <div v-for="meal in meals"> 
     {{meal}} 
     <input :id="meal" :name="meal" v-model.number="creditsPerMeal[meal]" type="number"> 
    </div> 
    <div> 
     Credits used: {{creditsSum}} 
    </div> 
    </div> 
</template> 

<script> 
    export default { 

    mounted() { 
     console.log('Component ready.'); 

     console.log(JSON.parse(this.f)); 

    }, 

    props: ['f','c'], 

    name: 'credits', 
    data: function() { 
    var meals = JSON.parse(this.f) 

     var creditsPerMeal = {} 
     for (var i = 0; i < meals.length; i++) { 
     creditsPerMeal[meals[i]] = 0 
     }, 

     var selection = [] 

     for (var i = 0; i < meals.length; i++) { 
      selection.push({ 
       food: this.meals[i], 
       quantity: creditsPerMeal[meals[i]] 
      }); 
     }, 

     return { 
     credits: this.c, 
     meals, 
     selection=, 
     creditsPerMeal 
     } 
    }, 
    computed: { 
     creditsSum() { 
     return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0) 
     } 
    } 
    } 
</script> 

UPDATE

:ここ

は完全なコードです。

enter image description here

編集は、あなたが "選択=" 確かに構文エラーがあり

computed: { 
    creditsSum() { 
    return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0) 
    }, 

    createSelection: function(){ 
    for (var i = 0; i < meals.length; i++) { 
     return createSelection.push({ 
      food: meals[i], 
      quantity: creditsPerMeal[meals[i]] 
     }) 
     } 
    } 
} 
+0

は、あなたが正確な構文エラーが何であるか、私はいくつかの余分なコンマを見ることができますあなたのコードでforループの終わりに:彼らはそれを引き起こしている、あなたはそれのバイブルを作成することはできますか? – Saurabh

+0

ああ、あなたのデータモデルをきれいにすることを検討して、これは非常に悪い方法です、可能な限り多くのきれいにあなたのアプリのモデルを保持し、初期値とデータの構造だけを含める必要があります。ループはありません、その事のためにVueJSには別のオブジェクトがあります。 –

+0

こんにちは@Saurabh、私はSyntacのエラーを修正し、配列を作成していますが、それは正しく実行されていません。どのようにして配列のオブジェクトが自動的に入力ボックスで更新されるのですか?ウォッチャーを使う? –

答えて

0

を計算:

return { 
    credits: this.c, 
    meals, 
    selection=, 
    creditsPerMeal 
    } 
関連する問題