Vue mint-ui 动态生成单选表单并绑定属性（含文件上传）

需求

为保安人员研发一款巡逻记录小应用，巡逻的内容从服务器端获取，对应每个巡逻内容须提交巡逻结果和一张印证图片。

思路

从后台拉取数据动态生成单选组，并绑定数据属性，每一个单选组对应一个文件上传功能。具体为：根据后台拉取的单选组内容，在data()中动态创建一个json数据，包含单选项目本身的内容、存储用户选择值和对应的图片保存路径。

代码

html部分：

<template>
  <div style="text-align: left;padding-bottom: 50px;">

    <!-- //设置巡逻时间 -->
    <mt-datetime-picker ref="picker" type="datetime" @confirm="handleConfirm" v-model="defaultDatetime">
    </mt-datetime-picker>
    <mt-field label="巡逻时间" v-model="form.ptime" @click.native="selectDatetime"></mt-field>
    
    <div v-for="item in form.results" style="border-bottom: 1px solid #999;">
      <!--将已经动态创建的data属性动态绑定到单选按钮组中-->
      <mt-radio align="left" :title="pinjie(item.id,item.content)" v-model="item.value" :options="['正常','异常，已报告']">
      </mt-radio>

      <!-- 提交图片按钮 -->
      <mt-button size="small" type="default" @click="selectFile(item.label)"><span class="fa fa-photo"></span>
      </mt-button>
      <!-- 隐藏的文件上传标签 -->
      <input @change="uploadFile($event,item.label)" type="file" :ref="item.label"
        style="border-bottom: 1px solid #999999;display: none;" accept=".jpg,.jpeg,.png" />
      <!-- 回显图片 -->
      <img :src="item.imgurl" :ref="setImgRef(item.label)" height="40px" />
    </div>

    <div style="text-align: center;padding-top: 10px;">
      <mt-button type="default" @click="reset()">重 置</mt-button>&emsp;&emsp;
      <mt-button type="primary" @click="submit()">提 交</mt-button>
    </div>
  </div>
</template>

<