[Vuejs]-Vue computed value as data property value

by

1👍

You can add watcher for your z.

  watch: {
    z: function (newValue, oldValue) {
       // here you can change x.y
    }
  },

-1👍

Found a workaround, but i think it’s ugly:

<template>
  <section>
    <div>{{ refFlag1 }}</div>
    <div>{{ compRefFlag1 }}</div>
    <div>{{ x }}</div>
  </section>
</template>

<script>
export default {
  name: "example",
  data: () => ({
    refFlag1: false,
    refFlag2: false,
    x: [{ visible: null, visibleFunc: "that.compRefFlag1" }]
  }),
  watch: {
    allRelevatFlags: function () {
      setTimeout(() => this.updateVisible());
    }
  },
  mounted() {
    this.x[0].visible = this.compRefFlag1;
    setTimeout(() => (this.refFlag1 = true), 1e3);
  },
  methods: {
    updateVisible() {
      // eslint-disable-next-line no-unused-vars
      let that = this; // eval doesn't see 'this' scope
      this.x.forEach(step => (step.visible = eval(step.visibleFunc)));
    }
  },
  computed: {
    allRelevatFlags() {
      return `${this.compRefFlag1}${this.compRefFlag2}`;
    },
    compRefFlag1() {
      return this.refFlag1;
    },
    compRefFlag2() {
      return this.refFlag2;
    }
  }
};
</script>

Watch for changes in any relevant flag and then using JS eval() set the visible flag anew.

There’s got to be a better way…

Leave a comment