Sign in

An attribute in data in Vue depends on the calculated result

NoGuru edited in Thu, 16 Jun 2022

I want to process some business logic in computed, but eslint prompts that variables in data cannot be re assigned in computed. Is there a better way? Except in the watch

    computed: {
        userData() {
            const userData = JSON.parse(JSON.stringify(this.data));
            let resultArr = [];

            Object.entries(userData).forEach(([key, value]) => {
                // eslint-disable-next-line
                userData[key].isFull = this.checkListItem(userData[key]);
                userData[key].showName = this.nameFormat(userData[key]);

            // 默认值排除不符合要求的
            _.forEach(resultArr, (item, index) => {
                _.forEach(this.defaultPerson, (it, id) => {
                    if (it === item.ads && !item.isFull) {
                        // eslint-disable-next-line
                        this.isSelected.splice(index, 1, false);
                        // eslint-disable-next-line
                        this.addPeopleArr.splice(index, 1, false);

            return resultArr;
3 Replies
commented on Thu, 16 Jun 2022

It depends on your specific needs. If you want to change the value of other attributes, watch is the best way. If you only want to execute this change once, you can consider processing it when it is mounted. Still, from your current needs, my suggestion is to put watch in the processing

commented on Thu, 16 Jun 2022

Computed is a setter that can set the calculation properties of setters

commented on Thu, 16 Jun 2022

Watch is to monitor the change of an event caused by a value change. Computed is to monitor the result caused by multiple value changes. It depends on your business scenario

lock This question has been locked and the reply function has been disabled.