Vuejs2组件不随父数据更改而更新

我正在尝试使用vuejs2制作一个简单的产品目录

我的所有数据都存储在一个对象数组中，然后我就有了这个数据的子集，这就是产品目录用来显示每个产品的部分。这个子集用于分页

当用户切换页面时，它会清除并将下一组数据推送到数组中

这会自动使产品组件显示新数据

我有以下问题，每个产品都有多种颜色，这些颜色存储为逗号分隔的字符串，例如（白色、蓝色、红色）

我试图使这些信息显示为每个产品旁边的选项下拉列表

直到我切换到数据的下一页，所有其他细节都会更新，除了颜色下拉列表，它只反映了前一组数据

我的产品列表存储在如下对象数组中：

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

然后，我有几个组件显示此数据数组：

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>'
});

Vue.component（'product-list'{
模板：'
'+
''+
“颜色”+
'Gender
{{product.Gender}
'+
“
”，
数据：函数（）{
返回{
产品：
分页达雷
};
},
Vue.component（'colorSelect'{
道具：['productID'，'colors'，]，
模板：“”，
数据：函数（）{//将基于字符串的字符串拆分为数组
var newArray=[]；
var optionsArray=this.colors.split（'，'）；
对于（i=0；i

在vuejs的应用程序部分中，我使用以下方法进行分页：

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

buildPages:函数（）{
对于（i=1；i

productArray是存储数据的主数组，paginatedArray是产品组件处理的数据子集

问题似乎在ColorSelect组件中，在其“数据”部分中，它将颜色数据拆分并作为ColorOption组件返回到select中，但不会在paginatedArray更改时更新

然而，colorSelect组件似乎确实传递了正确的数据，因为getID方法更新正确。只是数据部分没有被重新运行

这是我的第一个vuejs站点，有人对此有什么想法吗

---

谢谢

您应该将

彩色数组

作为计算属性，因为组件的

数据块只执行一次，以后对道具的更改将不会更新
彩色数组

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

Vue.component（'colorSelect'{
道具：['productID'，'colors'，]，
模板：“”，
计算：{
colorArray:function（）{//将基于字符串的字符串拆分为数组
var newArray=[]；
var optionsArray=this.colors.split（'，'）；
对于（i=0；i