使用表单的响应将数据集属性保存在 JSON 文件中 (Vue.js)

Question

我正在尝试构建一个 JSON 文件，在其中存储表单中的所有答案。一些输入具有额外的数据集属性（数据标签）。当我保存表单时，我想提取 JSON 文件中的所有这些“标签”作为键，并作为输入值的值。我尝试通过添加对这些输入的引用并使用 $refs 获取标签的名称来做到这一点。我收到错误：v-on 处理程序中出现错误：“TypeError：无法读取未定义的属性‘push’”我目前正在尝试将“标签”存储在单独的数组中，然后将其附加到表单输出中。不确定这是否是正确的解决方案，但我想不出其他任何东西，所以如果您有任何其他想法，请随意。Vue.js 版本：2.6vuetify.js 版本：2.3表单输入：<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>脚本：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 结构：  [{     "pos_t_1":"Test",     "pos_r_2":"",     "pos_r_3":"Radio 3",     "pos_r_4":"",     "pos_r_5":"",  }],我想要的 JSON 结构：  [{     "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":"",  }],

Answer 1

当您尝试推送到空数组时，您无法推送到指定的键，因为它不存在。

因此，当您声明tags = []然后尝试推送tags[key].push(value)标签时，[key] 未定义，因此推送方法不可用

相反，您可以更改 onSubmit 方法，如下所示

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] = this.radio

               }

           } else {

               let key = this.$refs[value].$attrs['data-tag']

               this.tags[key] = this.textfield

           }

        })

    }

Answer 2

我这样做了：

            Object.keys(this.$refs).forEach((value) => {

            const refs = this.$refs[value];

            if (Array.isArray(refs)) {

                for (let i = 0; i < refs.length; i++) {

                    let key = refs[i].$attrs['data-tag']

                    if (refs[i].isActive === true) {

                        this.tags[key] = this.radio

                    }

                    else {

                        this.tags[key] = ''

                    }

                }

            } else {

                let key = refs.$attrs['data-tag']

                this.tags[key] = this.textfield

            }

        })

也许这也会对其他人有所帮助。