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

Question

我正在尝试构建一个 JSON 文件，在其中存储表单中的所有答案。一些输入具有额外的数据集属性（数据标签）。当我保存表单时，我想提取 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":"",

  }],

Answer 1

当您尝试推送到空数组时，您无法推送到指定的键，因为它不存在。因此，当您声明tags = []然后尝试推送tags[key].push(value)标签时，[key] 未定义，因此推送方法不可用相反，您可以更改 onSubmit 方法，如下所示onSubmit() {&nbsp; &nbsp; &nbsp; &nbsp; Object.keys(this.$refs).forEach((value) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const refs = this.$refs[value];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (Array.isArray(refs)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for (let i = 0; i <= this.$refs[value].length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let key = this.$refs[value][i].$attrs['data-tag']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.tags[key] = this.radio&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let key = this.$refs[value].$attrs['data-tag']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.tags[key] = this.textfield&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }

Answer 2

我这样做了：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Object.keys(this.$refs).forEach((value) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const refs = this.$refs[value];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Array.isArray(refs)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < refs.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let key = refs[i].$attrs['data-tag']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (refs[i].isActive === true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.tags[key] = this.radio&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.tags[key] = ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let key = refs.$attrs['data-tag']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.tags[key] = this.textfield&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })也许这也会对其他人有所帮助。