Encountered an issue while trying to set a value in an Array within the Vuex Store:
VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable.
Seeking alternatives to achieve this without creating a local copy of the Vuex model array in the component.
The template for my component.vue:
<q-input v-for="phone, index in CompanyPhones" :key="index" v-model="phone" mask="(##) ### ## ##" stack-label label="Phone" />
The script for my component.vue:
setup () {
const $store = useStore()
const CompanyPhones = computed({
get: () => $store.getters['CompanySettingsModule/getCompanyPhones'],
set: (val) => {
$store.commit('CompanySettingsModule/setCompanyPhones', val)
}
})
return { CompanyPhones, }
}
Vuex module state.ts:
function state (): CompanySettingsInterface {
return {
CompanyPhones: ['', '', ''],
}
}
Mutation function in Vuex module mutations.ts:
setCompanyMails (state: CompanySettingsInterface, val) { state.CompanyMails = val },
Getter function in Vuex module getters.ts:
getCompanyPhones (state: CompanySettingsInterface) { return state.CompanyPhones },