I am working with a Vuex object that contains an array of languages consisting of objects with guid, name, and level properties.
I am trying to figure out how to write a method that will make it reactive. Currently, I have an input field with a value of "language.name" and I am unsure of the best practice for writing the method for the @input event.
This is how my Vuex store looks:
const state = () => ({
...
obj: {
skills: [],
languages: []
},
...
})
Here is an example of how it is used in the template with
v-for="(language, index) in obj.languages"v-text-field(
:value="language.name"
@input="setLanguage"
)
After researching getters, setters, modern JavaScript limitations for Vue, and the need to use Vue.set() to track changes in an array, I have come up with the following solution based on the TodoMVC example on the Vuex GitHub:
setLanguage: (e) => {
function updateLanguage({language, guid = language.guid, name = language.name, level = language.level}){
Vue.set(this.$store.state.obj.languages, this.$store.state.obj.languages.findIndex((it) => it.guid === guid), {guid, name, level})
}
const name = e.target.value.trim()
const language = this
updateLanguage({language, name})
}
However, I am not satisfied with this solution and feel like I am missing some key concepts.
Can someone suggest the best practice for making reactive objects within an array in Vuex state?