Question

我正在尝试编辑一个组件，当我打开组件时，我加载他的数据，如下所示：

  mounted () {
    var sectionKey = this.$store.getters.getCurrentEditionKey
    this.table = _.clone(this.$store.getters.getDocumentAttributes[sectionKey])
    this.table.tableGrid = _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid)
    this.entered = true
  },

因为你们可以看到我改变了this.entered，我试图跟踪元素的加载时间，这样我就可以开始跟踪观察者对组件的更改。

watch: {
    'table.rows': function (val, oldValue) {
      if (this.entered === true) {
        if (val > oldValue) {
          this.table.tableGrid.push([''])
        } else if (val < oldValue) {
          this.table.tableGrid.splice(this.table.tableGrid.length - 1, 1)
        }
      }
    },
    'table.cols': function (val, oldValue) {
      if (this.entered === true) {
        if (val > oldValue) {
          for (var i = 0; i < this.table.rows; i++) {
            this.table.tableGrid[i].push('')
          }
        } else if (val < oldValue) {
          for (var j = 0; j < this.table.rows; j++) {
            this.table.tableGrid[j].splice(this.table.tableGrid[j].length - 1, 1)
          }
        }
      }
    }

 data () {
    return {
      entered: false,
      table: {
        rows: 1,
        cols: 1,
        insert: 1,
        key: 'Table',
        tableStyle: 1,
        caption: '',
        hasCaption: true,
        hasHeader: true,
        tableGrid: [
          ['']
        ]
      }
    }
  },

这是我在更改它时获取cols和row的方式，因此我可以再次构建表：

tableRows () {
  return parseInt(this.table.rows)
},
tableCols () {
  return parseInt(this.table.cols)
}

我正在跟踪我的表格cols和表格行，它是一个数字输入，如果我想要改变它，问题是它在装入之前进入观察者，我不知道我怎么能处理这种情况任何帮助？

Answer 1

这是一个代码段，其中包含您尝试使用的一组最小功能，并且按预期工作。你能用它作为重现问题的起点吗？

var vm = new Vue({
  el: '#app',
  data: {
    data: {
      rows: 1
    },
    entered: false
  },
  mounted() {
    var self = this;
    setTimeout(function() {
      self.data = {
        rows: 10
      };
      self.entered = true;
    }, 1200);
  },
  watch: {
    'data.rows': function(newValue) {
      if (this.entered) {
        console.log("Rows now", newValue);
      } else {
        console.log("Not entered!");
      }
    }
  }
});

setInterval(function() {
  ++vm.data.rows;
}, 800);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
</div>

由于您在this.table部分定义data，因此它是一个响应变量，因此您可以像现在一样设置它：

this.table = _.clone(this.$store.getters.getDocumentAttributes[sectionKey]);

问题是this.table.tableGrid是否有回应。如果它是由上面的clone创建的，那就是。如果没有，不是。如果你不知道，改变这个：

this.table.tableGrid = _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid);

到

this.$set(this.table, 'tableGrid', _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid);

（在我看来，第一个clone应该完成整个副本，所以。）

安装数据后检查手表更改

1 个答案: