One issue I encountered was setting up a variable in vue that updates when the screen orientation changes. Despite adding this variable to the data object, it did not become reactive as expected.
This is my initial data function for the component:
data() {
let self = this;
const data = self.$f7route.context;
data.componentTexts = this.$LocaleHelper.getComponentTexts(componentName);
data.isLandscape = false;
return data;
},
I also included a button:
<button v-bind:class="isLandscape ? 'red' : 'blue'" @click="log">{{isLandscape}}</button>
The log function displays the value of isLandscape in the console correctly when the orientation changes. However, the button's appearance and text do not update accordingly.
If I change the data() function to this:
data() {
return {
isLandscape: false,
}
},
It works, but I lose other options previously set up in the function (such as the data object with getComponentText).
I attempted to combine both functionalities like this:
data() {
let self = this;
const data = self.$f7route.context;
data.componentTexts = this.$LocaleHelper.getComponentTexts(componentName);
return {
data,
isLandscape: false,
}
},
However, this approach failed. How can I maintain all previous options in the data() function while ensuring isLandscape remains a reactive variable?