How to avoid unexpected side effect in computed properties - VueJS

Question

I am trying to prefill a form with data from a vuex store.In the code provided is the expected result, I need but I know that this is not the way to do it. I am fairly new to Vue/Vuex. The inputs use a v-model thats why i cant use :value="formInformation.parentGroup" to prefill.

  data() {
    return {
      groupName: { text: '', state: null },
      parentName: { text: '', state: null },
    };
  },
  computed: {
    formInformation() {
      const groups = this.$store.getters.groups;
      const activeForm = this.$store.getters.activeForm;
      if (activeForm.groupIndex) {
        const formInfo = groups[0][activeForm.groupIndex][activeForm.formIndex]
        this.groupName.text = formInfo.name // Is there a way to not use this unexpected side effect ?
        return formInfo;
      } else {
        return 'No Form Selected';
      }
    },
  },

I searched for an answere for so long now that i just needed to ask it. Maybe i am just googling for something wrong, but maybe someone here can help me.

Alex Brohshtut · Accepted Answer · 2020-03-20 14:04:36Z

1

You are doing all right, just a little refactoring and separation is needed - separate all the logic to computed properties (you can also use mapGetters):

  mounted() {
    if (this.formInformation) {
      this.$set(this.groupName.text, this.formInformation.name);
    }
  },
  computed: {
    groups() {
      return this.$store.getters.groups;
    },
    activeForm() {
      return this.$store.getters.activeForm;
    },
    formInformation() {
      if (this.activeForm.groupIndex) {
        return this.groups[0][this.activeForm.groupIndex][
          this.activeForm.formIndex
        ];
      }
    }
  }

answered Mar 20, 2020 at 14:04

Alex Brohshtut

2,06013 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

D Malan · Accepted Answer · 2020-03-20 13:59:42Z

0

You could either make groupName a computed property:

computed: {
    groupName() {
         let groupName = { text: '', state: null };
         if (formInformation.name) {
          return groupName.text = formInfo.name;
         }
         return groupName;
    }

Or you could set a watcher on formInformation:

watch: {
    formInformation: function (newFormInformation, oldFormInformation) {
      this.groupName.text = formInfo.name;
    }
  },

answered Mar 20, 2020 at 13:59

D Malan

11.6k3 gold badges35 silver badges65 bronze badges

1 Comment

user9458946 Over a year ago

I tried your first method before asking here and I had problems with the v-model after using it as a computed property. But your second answer with the watcher works perfectly fine. Thanks

Shivam Singh · Accepted Answer · 2020-03-20 14:14:09Z

Avoid mutating data property in computed.

Computed are meant to do some operation (eg. reduce, filter etc) on data properties & simply return the result.

Instead, you can try this:

computed: {
  formInformation() {
    const groups = this.$store.getters.groups;
    const activeForm = this.$store.getters.activeForm;
    if (activeForm.groupIndex) {
      const formInfo = groups[0][activeForm.groupIndex][activeForm.formIndex]
      // this.groupName.text = formInfo.name // <-- [1] simply, remove this
      return formInfo;
    } else {
      return 'No Form Selected';
    }
  }
},

// [2] add this, so on change `formInformation` the handler will get called
watch: {
 formInformation: {
  handler (old_value, new_value) {
   if (new_value !== 'No Form Selected') { // [3] to check if some form is selected 
    this.groupName.text = new_value.name // [4] update the data property with the form info
   },
   deep: true, // [5] in case your object is deeply nested
  }
 }
}

Collectives™ on Stack Overflow

How to avoid unexpected side effect in computed properties - VueJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related