Im just playing with the new F7 cli and there’s one question:
I created a project PWA & Cordova.
Now, I want to have some global reactive settings, but if I add them to data()
in app.vue
, and want to bind the username
(or whatever) to an input field, that doesn’t work (because the page is compiled before $data
becomes available).
<f7-list-input
label="Name"
type="text"
placeholder="Your name"
:value="$data.username"
@input="$data.username = $event.target.value"
></f7-list-input>
How can I add this reactively to e.g. the settings-page?
The only option - it seems - is, to add a data
to the Vue instance itself and access via $root:
const vue = new Vue({
el: '#app',
data: {
username: "John Doe",
settings: {
name: "Some other name" // access via $root.settings
},
},
render: (h) => h(App),
// Register App Component
components: {
app: App
},
});
I use vuex to manage my state.
https://vuex.vuejs.org/
that’s good for you - but that was neither my question, nor does it answer anything (the question has nothing to do with states, but reactivity)
However, if I put the keys into f7params, it works:
<f7-list-input
label="E-mail"
type="email"
placeholder="E-mail"
:value="$f7.data.settings.name"
@input="$f7.data.settings.name = $event.target.value"
@changed="$f7.data.settings.name = $event.target.value"
></f7-list-input>
Vuex is a reactive state manager. But ok.
<f7-list-input
label="Name"
type="text"
placeholder="Your name"
:value="Vuex Getter"
@input="Vuex Mutation/Action"
></f7-list-input>
But my question was not about Vuex and state-management (because I don’t need the state, but access the property directly)
i didn’t say it was your solution, just suggesting a way to access to them. Maybe you need another solution.
I already posted a solution
To be honest didn’t know that $f7.data becomes reactive, this is probably Vue’s side effect rather than predictive behavior. I would suggest to move global reactive data to root component data and access it as $root, at least this is what is supported and recommended
Ha - great… I was pulling my head, because I didn’t understand that…
And I will take your advice and put it under $root
1 Like