親データの変更としてVuejs2コンポーネントが更新されない

Question

vuejs2を使用して簡単な製品カタログを作成しようとしています。

私のすべてのデータはオブジェクト配列に格納されています。このデータのサブセットは、製品カタログが各製品を表示するために使用するものです。このサブセットは改ページに使用されます。

ユーザーがページを切り替えると、ユーザーはページを消去し、次のデータセットをアレイにプッシュします。

これにより、自動的に製品コンポーネントが新しいデータを表示します。

は、私は次のように問題を持って、各製品は、例えば、カンマ区切りの文字列として格納されている複数の色を持っている（白、青、赤）

は私がのドロップダウンリストとして表示され、その情報を作成しようとしています各製品の横にオプションがあります。

これはデータの次のページに切り替えるまで機能します。他のすべての詳細は、以前のデータセットのみを反映するカラードロップダウンを除いて更新されます。

マイ製品リストのようなオブジェクトの配列に格納されます。私はvuejsのアプリセクション内

Vue.component('product-list', { 
template: '<ul id="productList">'+ 
     '<product :productID="product.productID" v-for="product in products">'+ 
     '<h4>Colour</h4><colourSelect :colours="product.colour" :productID="product.productID"></colourSelect>' + 
     '<h4>Gender</h4><span class="genderSpan"><p v-bind:id="getID(product.productID)">{{product.gender}}</p></span>' + 

    '</product></ul>', 
data: function() { 
    return { 
     products: 
      paginatedArray 

    }; 
}, 

Vue.component('colourSelect', { 
props: ['productID', 'colours'], 
template: '<select v-bind:id="getID()" class="form-control input-xs"><colourOption v-for="colourItem in colourArray"></colourOption></select>', 
data: function() { //split string based into array 
    var newArray = []; 
    var optionsArray = this.colours.split(','); 


    for (i = 0; i < optionsArray.length; i++) { 
     var obj = { 
      colour: optionsArray[i] 
     } 
     newArray.push(obj) 
    } 
    return { 
     colourArray: newArray 

    }; 
}, 
methods: { 
    getID: function (test) { 
     return 'colourSelect' + this.productID; 
    } 
    } 
}); 

Vue.component('colourOption', { 
props:['options'], 
template: '<option><slot></slot></option>' 
}); 

：

var obj = { 
      productID: productID, 
      product: title, 
      gender: gender, 
      colour: colour, 
      cost: cost, 
      size: size, 
      description: description 
      } 
    productArray.push(obj); 

Iは、データのこの配列を表示するいくつかの成分を有しますページ分割を行うメソッドに従う：

 buildPages: function() { 

     for (i = 1; i < this.listLength() /this.totalPage ; i++) { 
      this.pages.push(i); 
     } 
     var page = this.currentPage * this.totalPage; 

     for (i = page; i < page + this.totalPage ; i++) { 
      paginatedArray.push(productArray[i]); 
     } 


    }, 
    listLength: function() { 
     var listTotal = productArray.length; 
     return listTotal 
    }, 
    changePage: function (number) { 
     this.currentPage = number 
     var page = this.currentPage * this.totalPage; 
     //paginatedArray = []; 

     var count = 0; 
     for (i = page; i < page + this.totalPage ; i++) { 
      if (typeof productArray[i] !== 'undefined') { 
       paginatedArray.splice(count, 1, productArray[i]) 
      } 

      count++ 
     } 
    }, 

productArrayは、d ata、paginatedArrayは、製品コンポーネントが動作するデータのサブセットです。

問題はcolourSelectコンポーネント内にあるように見えますが、その「データ」セクション内で色データを分割してcolourOptionコンポーネントとしてselectに返しますが、paginatedArrayが変更されたときは更新されません。

しかし、実際にgetIDメソッドが正しく更新されるため、colourSelectコンポーネントには正しいデータが渡されているようです。そのデータセクションは再実行されません。

これは私の最初のvuejsサイトです、誰もがこの周りのアイデアを持っていますか？

おかげ

Answer 1

コンポーネントのdataブロックは一度だけ実行されますようあなたは、計算されたプロパティとしてcolourArrayをしなければならないと小道具の後の変更はcolourArrayは更新されません。

Vue.component('colourSelect', { 
    props: ['productID', 'colours'], 
    template: '<select v-bind:id="getID()" class="form-control input-xs"><colourOption v-for="colourItem in colourArray"></colourOption></select>', 
    computed:{ 
    colourArray: function() { //split string based into array 
     var newArray = []; 
     var optionsArray = this.colours.split(','); 


     for (i = 0; i < optionsArray.length; i++) { 
     var obj = { 
      colour: optionsArray[i] 
     } 
     newArray.push(obj) 
     } 
     return newArray 
    } 
}, 
methods: { 
    getID: function (test) { 
     return 'colourSelect' + this.productID; 
    } 
    } 
});