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

Posted 2023-03-14

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

【英文标题】：Saving dataset attributes in JSON File with the responce of the form (Vue.js)

【发布时间】：2021-03-12 12:39:58

【问题描述】：

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

我收到一个错误：

v-on 处理程序中的错误：“TypeError: Cannot read property 'push' of undefined”

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

不确定这是否是正确的解决方案，但我想不出其他任何方法，如果您有任何其他想法，请随意。

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":"",
  ],

【参考方案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
           
        )
    

【讨论】：

感谢您的回答 this.tags[key] = this.textfield 适用于文本字段。我的收音机还有另一个问题。当我在 for 循环中尝试 this.tags[key] = this.radio 时，所有无线电标签都从所选无线电中获得相同的值，但我需要该值仅适用于所选无线电中的所选标签，其余部分的标签必须为空。你有解决办法吗？

我不知道 vuetify。但是你可以做一些有条件的，比如this.refs[i]['data-tag'] === 'radio.tag' && this.$refs[i].checked) this.tags[key] = this.radio else this.tags[key] = ''

【参考方案2】：

感谢@Donkarnash，我做到了：

            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
            
        )

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