vue 表单清空报错

vue 表单清空报错 Cannot read property ‘resetFields’ of undefined

this.$refs[‘ruleForm1’].resetFields();

1、我们需要为每个form-item加上prop属性，要不然无法清空（大部分的问题就是出在这）
2、resetFields()方法是重置表单，重置为默认值，而不是设置为空值
3、this.$refs[‘ruleForm1’].resetFields();里面的ruleForm1与表单绑定的ref="ruleForm1 "的值对应
如：
代码：`

 <!--新增产品-->
    <el-dialog  :visible.sync="isVisible"  width="30%" title="新建产品">
      <div>
        <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="100px">
          <el-form-item  label="产品系列" prop="category_id">
            <el-select v-model="ruleForm1.category_id" placeholder="请选择产品系列">
              <el-option v-for="item of categories" :key="item.id" v-bind:value="item.name"  >{{item.name}}
              </el-option>
            </el-select>
            <el-button title="没有合适的系列？点击添加" @click.prevent="add_category()"><i class="el-icon-plus"></i></el-button>
          </el-form-item>
          <el-form-item  label="名称" prop="name">
            <el-input v-model="ruleForm1.name"></el-input>
          </el-form-item>
          <el-form-item  label="型号" prop="code">
            <el-input v-model="ruleForm1.code"></el-input>
          </el-form-item>
          <el-form-item  label="数据格式" prop="encode">
            <el-select v-model="ruleForm1.encode" placeholder="请选择数据格式">
              <el-option label="Alink JSON" value="1"></el-option>
              <el-option label="透传/自定义" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="描述" prop="note">
            <el-input type="textarea" v-model="ruleForm1.note"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  type="primary" @click.prevent="submitForm(ruleForm1)" :loading="addLoading">确认</el-button>
            <el-button class="ml-2"  @click="isVisible = false">取消</el-button>
          </el-form-item>
           </el-form>
      </div>
    </el-dialog>

 addProduct(ruleForm1).then(response => {
           this.getProduct();
            this.addLoading = false;
            this.isVisible = false;
            this.$refs['ruleForm1'].resetFields();
        }).catch(err => {
          console.log("err===>",err);
        });