I am currently working on creating a JSON file to store all the answers obtained from a Form. Some of the input fields have an additional dataset attribute (data-tag). When saving the Form, I aim to extract these 'tags' and include them in the JSON file as keys with the input values as their corresponding values. My approach involved referencing these inputs and using $refs to obtain the tag name.
However, I encountered an error:
Error in v-on handler: "TypeError: Cannot read property 'push' of undefined"
To address this issue, I am trying to store the 'tags' in a separate array and then merge it with the Form Output.
If you have any alternative solutions or ideas, please share as I'm open to suggestions.
- Vue.js version: 2.6
- vuetify.js version: 2.3
List of Form inputs:
<v-text-field label="ICD" id="pos_t_1" name="pos_t_1" ref="icd" data-tag="icd_tag" v-
model="textfield" hide-details="auto" />
<v-radio-group v-model="radio" hide-details="auto" row>
<v-radio
v-for="radio in group"
ref="radioGroup"
:key="radio.id"
:id="radio.id"
:name="radio.id"
color="primary"
:data-tag="radio.tag"
:label="radio.text"
:value="radio.text"
>
</v-radio>
</v-radio-group>
Script:
export default Vue.extend({
name: 'Test',
data: function () {
return {
tags: [],
radio: '',
group: [
{id: 'pos_r_2', text: 'Radio 1', tag: 'radio_tag_2'},
{id: 'pos_r_3', text: 'Radio 2', tag: 'radio_tag_3'},
{id: 'pos_r_4', text: 'Radio 3', tag: 'radio_tag_4'},
{id: 'pos_r_5', text: 'Radio 4', tag: 'radio_tag_5'},
],
}
},
methods: {
onSubmit() {
Object.keys(this.$refs).forEach((value) => {
const refs = this.$refs[value];
if (Array.isArray(refs)) {
for (let i = 0; i <= this.$refs[value].length; i++) {
let key = this.$refs[value][i].$attrs['data-tag']
this.tags[key].push(this.radio)
}
} else {
let key = this.$refs[value].$attrs['data-tag']
this.tags[key].push(this.textfield)
}
})
}
}
})
JSON structure of Form's output:
[{
"pos_t_1":"Test",
"pos_r_2":"",
"pos_r_3":"Radio 3",
"pos_r_4":"",
"pos_r_5":"",
}],
Desired JSON structure:
[{
"pos_t_1":"Test",
"icd_tag":"Test",
"pos_r_2":"",
"radio_tag_2":"",
"pos_r_3":"Radio 3",
"radio_tag_3":"Radio 3",
"pos_r_4":"",
"radio_tag_4":"",
"pos_r_5":"",
"radio_tag_5":"",
}],