使用格式（Vue.js）将数据集属性保存在JSON文件中

debugcn 发表于 Dev

六农

我正在尝试构建一个JSON文件，其中存储了来自Form的所有答案。一些输入具有额外的数据集属性（数据标签）。当我保存表单时，我想提取JSON文件中的所有这些“标签”作为键并将输入值作为值。我试图通过添加对这些输入的引用并使用$ refs标记名称来做到这一点。

我收到一个错误：

v-on处理程序中的错误：“ TypeError：无法读取未定义的属性'push'”

我目前正在尝试将“标签”存储在单独的数组中，然后将其附加到表单输出中。

不知道这是否是正确的解决方案，但是我什么也没想，如果您有其他任何想法，请随时联系。

Vue.js版本：2.6
vuetify.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":"",
  }],

唐卡纳什

当您尝试压入一个空数组时，您将无法压入指定键，因为它不存在。

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

相反，您可以如下更改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
           }
        })
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。