Open Blakeinstein opened 3 years ago
Describe the bug When updating a reactive preference, the change is not reflected. The console contains warning containing the above error.
To Reproduce Steps to reproduce the behavior:
- Setup a vue3 project (I am using vite-cli -> vue + typescript)
- Install vue-preferences then create a reactive preference
- Update the preference.
- See console
Expected behavior The value should have reactively updated without requiring a refresh.
Error
runtime-core.esm-bundler.js:38 [Vue warn]: Property "_isVue" was accessed during render but is not defined on instance. at <Content> at <App> warn @ runtime-core.esm-bundler.js:38 get @ runtime-core.esm-bundler.js:6877 s.J @ preference-object.js:58 s.get @ preference-object.js:36 get @ preference.js:12 reactiveEffect @ reactivity.esm-bundler.js:42 get value @ reactivity.esm-bundler.js:876 get @ runtime-core.esm-bundler.js:3090 _sfc_render @ Content.vue:2
Desktop (please complete the following information):
- OS: Windows 11
- Browser Webview2 [edge]
"vue": "^3.0.5", "vue-preferences": "^3.0.0"
Additional context Here is what my code approx looks like, but I get the error on almost all instances of updating preference. To reflect the changes elsewhere. I need a full reload.
<button round @click="theme = theme == 'dark' ? 'light' : 'dark'"> <script> computed: { theme: preference('activeTheme', { defaultValue: 'dark' }) } </script>
I also tried the programmatic approach but the value doesnt update.
Did you happen to get this to work?
@joshmakar Nope. I had to drop the feature entirely.
@Blakeinstein @joshmakar
Regarding the warning, I think it's because _isVue
is used in Vue 2, but in Vue 3 we should be using __isVue
. We should consider making a change there. Apart from the warning, are you having an issue because of that?
About the reactive property, I checked, and I couldn't make it work, but this is the workaround I found:
<template>
<button :class="theme" @click="toggleDarkTheme">Change mode</button>
</template>
<script>
import { preference } from "vue-preferences";
preference("applicationTheme", { defaultValue: "default" });
export default {
name: "App",
data() {
return {
theme: "default",
};
},
methods: {
toggleDarkTheme() {
preference("applicationTheme").set(
preference("applicationTheme").get() === "default" ? "dark" : "default"
);
this.theme = preference("applicationTheme").get();
},
},
mounted() {
this.theme = preference("applicationTheme").get();
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.dark {
color: white;
background-color: black;
}
.default {
color: black;
background-color: white;
}
</style>
Please, keep me posted on this.
Describe the bug When updating a reactive preference, the change is not reflected. The console contains warning containing the above error.
To Reproduce Steps to reproduce the behavior:
Expected behavior The value should have reactively updated without requiring a refresh.
Error
Desktop (please complete the following information):
Additional context Here is what my code approx looks like, but I get the error on almost all instances of updating preference. To reflect the changes elsewhere. I need a full reload.
I also tried the programmatic approach but the value doesnt update.