Attempting to utilize computed properties for binding input fields with the Vuex Store has presented some challenges. Each Data Stream in my application has dynamic input fields, managed through the admin section. I need to allow users to select a specific data stream, after which the corresponding inputs should be displayed based on API response.
I have made an attempt to achieve this functionality, but I've hit a roadblock. Computed properties (getters) do not accept attributes, making it impossible to specify which data the vuex getter should return.
Below is the code snippet that I've been using. Is there another approach to achieve the same outcome?
The versions I am currently working with are:
- vue - 2.6.1
- vuex - 3.6.2
- vuetify - 2.5.6
Vue JS Component - Input Fields
<v-text-field
:key="input_index"
v-model="data_stream_inputs[ds_index][input_index]"
:label="input.name"
:placeholder="input.placeholder"
></v-text-field>
Computed Properties (Issue with functionality)
computed: {
data_stream_inputs: {
get() {
return this.$store.getters['ActivateAudienceStore/getDataStreamInputByIndex'],
set(value) {
this.$store.commit('ActivateAudienceStore/SET_DATASTREAM_INPUT_BY_INDEX', value)
}
}
}
Getter Function
export const getDataStreamInputByIndex = (state) => (payload) => {
return state.data_delivery.datastreams[payload.data_stream].inputs[payload.index]
}