vue.js报错 Failed to resolve directive: modle 具体代码如下

Question

<template>

<div class="page-field">
    <CaqmHeader title='完工确认'/>
    
<div class="main_content">
      <div class="page-part">
        <mt-field label="附件编号" placeholder="请输入附件编号" v-modle="accessoryCode">
        </mt-field>
        <mt-field label="附件类别"  placeholder="请选择附件类别" 
        type="text" @click.native="deviceClick" v-modle="deviceClassType" 
  v-bind:value = "deviceClassTypeOptions.label">
        </mt-field>
  <mt-popup v-model="popupVisible1" position="bottom" class="mint-popup-4">  
         <mt-radio align="right" v-model="deviceClassTypeValue"
          :options="deviceClassTypeOptions" @change="checkon">
         </mt-radio> 
  </mt-popup>
  </div>
        

        <div class="page-part">
        <mt-field label="制作人员"  placeholder="请选择制作人" 
        type="text" @click.native="workerClick" v-modle="workersIds">
        </mt-field>
  
        <mt-field label="旁站人员"  placeholder="请输入旁站人员" 
        type="text"  v-modle="siteStaff">
        </mt-field>
  </div>

  <div class="page-part">
        <mt-field label="结构或工艺特征"  placeholder="请选择结构或工艺特征"type="text" 
  @click.native="struckClick" v-modle="structureAndProcess"    
  v-bind:value = "structureAndProcess">
        </mt-field>
  <mt-popup v-model="popupVisible2" position="bottom" class="mint-popup-4">  
   <mt-radio align="right" v-model="structureAndProcess"
    :options="structureOptions" @change="checkon">
  </mt-radio> 
  </mt-popup>
  </div>

  <div class="page-part">
        <mt-field label="安装形式"  placeholder="请选择安装形式" 
        type="text" @click.native="installationClick" v-modle="installationForm"
  v-bind:value = "installationForm">
        </mt-field>
  <mt-popup v-model="popupVisible3" position="bottom" class="mint-popup-4">  
   <mt-radio align="right" v-model="installationForm"
    :options="installationOptions" @change="checkon">
  </mt-radio> 
  </mt-popup>
  </div>

  <div class="page-part">
        <mt-field label="规格"  placeholder="请选择规格" 
        type="text" @click.native="specificationClick" v-modle="specification"
  v-bind:value = "specification">
        </mt-field>
  <mt-popup v-model="popupVisible4" position="bottom" class="mint-popup-4">  
   <mt-radio align="right" v-model="specification"
    :options="specificationOptions" @change="checkon">
  </mt-radio> 
  </mt-popup>
  </div>

  <div class="page-part">
        <mt-field label="系统标称电压"  placeholder="请选择系统标称电压" 
        type="text" @click.native="systemVoltageClick" v-modle="systemVoltage"
  v-bind:value = "systemVoltage">
        </mt-field>
  <mt-popup v-model="popupVisible5" position="bottom" class="mint-popup-4">  
   <mt-radio align="right" v-model="systemVoltage"
    :options="systemVoltageOptions" @change="checkon">
  </mt-radio> 
  </mt-popup>
  </div>
  
</div>
 

    <div class="page-button-group confirm_btn">
      <mt-button size="large" type="primary" @click="finish">确认完工</mt-button>
    </div>
</div>

</template>

<script>

import CaqmHeader from '../components/common/CaqmHeader'
export default {
  data(){
      return{
      popupVisible1 : false,
  popupVisible2 : false,
  popupVisible3 : false,
  popupVisible4 : false,
  popupVisible5 : false,
  accessoryCode : '',
  deviceClassType : "",
  workersIds : "",
  siteStaff : "",
  structureAndProcess : "",
  installationForm : "",
  specification : "",
  systemVoltage : "",
  deviceClassTypeValue : "",
deviceClassTypeOptions :[{ label : '中间头',
                           value :'1' ,
                          },
                           {
                            label : '终端头',
                            value : '2',
                         }],
structureOptions:[{label:'热缩式',
                    value:'1'},
                  {label:'预制式',
                    value:'2'
                  },
                  {label:'充油式',
                  value:'3'
                  },
                  {label:'冷缩式',
                  value:'4'
                }],

installationOptions:[{label:'户内',

                    value:'1'},
                  {label:'户外',
                    value:'2'
                 }],                

specificationOptions:[{label:'单芯',

                    value:'1'},
                  {label:'三芯',
                    value:'2'
                 }],

systemVoltageOptions:[{label:'10KV',

                    value:'10'},
                  {label:'20KV',
                    value:'20'
                  },
                  {label:'35KV',
                  value:'35'
                 }],                
 }
   },
  methods:{
  checkon: function(){
  console.log(this.deviceClassTypeValue);
   let membersArray = this.deviceClassTypeOptions;
   for(let i=0; i<membersArray.length; i++) {
    if(membersArray[i].value == this.deviceClassTypeValue) {
       this.deviceClassType = membersArray[i].label;
       break; 
    }
  }
 this.popupVisible1 = false
 
},

//制作人员点击事件

  workerClick() {
 this.$router.push({name:'Search', params:{type : 3}})
},
//附件类别点击事件
deviceClick() {
document.activeElement.blur();
 this.popupVisible1 = true
},
// 结构或工艺点击事件
struckClick() {
  document.activeElement.blur();
  this.popupVisible2 = true
},

//安装形式点击事件
installationClick() {
  document.activeElement.blur();
  this.popupVisible3 = true
},
//规格点击事件
specificationClick() {
  document.activeElement.blur();
  this.popupVisible4 = true
},
//系统标称电压点击事件
systemVoltageClick() {
  document.activeElement.blur();
  this.popupVisible5 = true
},
/*init(){
    var obj = sessionStorage.getItem("deviceClassType");
    this.deviceClassType = obj.value;
},*/
finish:function (){
    var completeFiles ={};
    completeFiles.accessoryCode = this.accessoryCode;
    completeFiles.deviceClassType = this.deviceClassType;
    completeFiles.workersIds = this.workersIds;
    completeFiles.siteStaff = this.siteStaff;
    completeFiles.structureAndProcess = this.structureAndProcess;
    completeFiles.installationForm = this.installationForm;
    completeFiles.specification = this.specification;
    completeFiles.systemVoltage = this.systemVoltage;
    completeFiles.deviceClassType = this.deviceClassType;

     // POST请求
  this.$http({
        url: '',
        method: 'POST',
        // 请求体重发送的数据
        data: completeFiles,
        // 设置请求头
        headers: {
            'Content-Type': 'x-www-from-urlencoded'
        }
        }).then(response => {
              // 请求成功回调
              let code = JSON.parse(response.result);
              if (code === 0) {
                Toast('成功');
              }
        }, response => {
              // 请求失败回调
        });
}
},
components: {
 CaqmHeader
  }
}

</script>

<style scoped>
.confirm_btn {
position: absolute;
bottom: 0;
width: 100%;
}

.main_content{
overflow: scroll;
width: 100%;
bottom: 56px;
}
.mint-popup-4{

width: 100%;

}

</style>

Answer 1

v-model 不是 modle