Question

我有这样的JSON

'criteria': [
 {
  'row': {
    'name': '1',
    'values': [{}]
  }
 },
 {
  'row': {
    'name': '2',
    'values': [{}]
  }
 }
]

我尝试过

watch: {
 criteria: {
   deep: true,
   handler () {
    console.log(this.criteria)
   }
  }
}

但是它正在观察标准的每一个变化。我如何只观看值？有什么方法可以编写自定义函数并返回我想要以角度观看的内容？

已更新：

我也尝试过

computed: {
test () {
  var values = []
  _.forEach(this.criteria, function (criteria) {
    _.forEach(criteria.row, function (row) {
      values.push(row.values)
    })
  })
  return values
}
},
watch: {
  test () {
   console.log("changed")
  }
}

仍在观察每件事。

Answer 1

您需要观看criteria数组并在手表处理功能中检测更改的项目。

data: {
    criteria: [
        {
            'row': {
                'name': '1',
                'values': [{}]
            }
        },
        {
            'row': {
                'name': '2',
                'values': [{}]
            }
        }
    ],
    oldCriteria: []
},
methods: {
    setCriteriaValue() {
        // deep clone
        this.oldCriteria = JSON.parse(JSON.stringify(this.criteria))
    },
},
mounted() {

    // TEST: isChange = FALSE
    setTimeout(() => {
        this.criteria[1].row.name = "new name"
    }, 2000);

    // TEST: isChange = TRUE
    setTimeout(() => {
        this.criteria[1].row.values = [10, 20]
    }, 4000);
},
watch: {
    "criteria": {
        deep: true,
        handler: function (after) {
            console.log("criteria watched")

            var vm = this;
            let isChanged = false;

            for (let index = 0; index < after.length; index++) {

                const item = after[index].row
                const props = Object.keys(item)

                isChanged = props.some(function(prop) {
                    if (prop === "values") {
                        const newValue = item[prop]
                        const oldValue = vm.$data.oldCriteria[index].row[prop]

                        return JSON.stringify(newValue) !== JSON.stringify(oldValue);
                    }

                    return false
                })
            }

            if (isChanged) {
                alert("CHANGED!")

                // Do your stuff here
                // ...
            }

            // Update the old value
            vm.setCriteriaValue();
            console.log("isChanged = ", isChanged)
        }
    }
}

Answer 2

只需观看length中的criteria

像您的用例一样：

watch: {
 'criteria.length': {
   handler () {
    console.log(this.criteria)
   }
  }
}

这是完整的API：

https://vuejs.org/v2/api/#watch

你可以看任何东西。

技巧：制作计算道具并观看计算道具。

Vue-如何观看对象数组中的属性

2 个答案: