How to set up a reactive variable?

Question

I set up a variable in vue which updates whenever the orientation of the screen changes. However when I add this isLandscape variable to the object which is returned by data() it fails to become a reactive variable.

My initial data function for my component.

data() {
    let self = this;
    const data = self.$f7route.context;
    data.componentTexts = this.$LocaleHelper.getComponentTexts(componentName);
    data.isLandscape = false;
    return data;
  },

And I also set up a button

<button v-bind:class="isLandscape ? 'red' : 'blue'" @click="log">{{isLandscape}}</button>

Now the log function writes the value of isLandscape to the console - so I do see that whenever I change the orientation its value does change indeed. However the button's class and inner body value does not.

If I change the data() function to this:

  data() {
    return {
      isLandscape: false,
    }
  },

Then it works, however I loose every other option which I set up previously in the function (so the data object with the getComponentText). I tried to add them like this:

  data() {
    let self = this;
    const data = self.$f7route.context;
    data.componentTexts = this.$LocaleHelper.getComponentTexts(componentName);
    return {
      data,
      isLandscape: false,
    }
  },

But it oviously does not work. How can I get around this and have everything from the previous data() and also make isLandscape a proper reactive variable?

score 0 · Answer 1 · answered Apr 29 '21 at 14:31

The problem isn't specific to Vue but to JavaScript syntax in general.

it could be:

const data = {};
...
data.componentTexts = ...;
data.isLandscape = false;
return data;

Or:

return {
  componentTexts: ...,
  isLandscape: false
};

It's unclear what is the role of $f7route.context. It should be a property on data object, not data object itself. It's very likely that $f7route.context should be used in computed, and $LocaleHelper.getComponentTexts should be used in methods, not data.

How to set up a reactive variable?

1 Answers1