Article From:https://segmentfault.com/q/1010000011135815
Question:

<template>

<div class="page-field">
    <CaqmHeader title='Complete confirmation of'/>< div class= "main_content" >< div class= "page-part" >< mt-Field label= "annex number" placeholder= "please enter the annex number" v-modle= "accessoryCode" >< /mt-field>< mt-field label= "attachment class" placeholder= "please select attachment class"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= "production personnel" placeholder= "please choose producer".TYpe= "text" @click.native= "workerClick" v-modle= "workersIds" >< /mt-field>< mt-field label= "side station personnel" placeholder= "please input the side station personnel".Type= "text" v-modle= "siteStaff" >< /mt-field>< /div>< div class= "page-part" >< mt-field label= "structureOr process characteristics "placeholder=", please select the structure or process characteristics "type=" text "@click.native= "struckClick" v-modle= "structureAndProc"Ess "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= "installation form"Placeholder= "please select installation form"Type= "text" @click.native= "installationClick" v-modle= "installationFo"RM "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= "specification" placeholdeR= "please select the specifications"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= "nominal voltage" placeholder= "please select the nominal voltage of the system".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" > confirm completion < /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 : 'Middle head ',Value:'1',},{Label: 'terminal head',Value:'2',]],StructureOptions:[{label:'heat shrinkable type',Value:'1'},{Label:'preform',Value:'2'},{label:'oil filled',Value:'3'},{label:'cold shrink type',Value:'4']],

installationOptions:[{label:’Indoors’,

                    value:'1'},
                  {label:'Outdoors',Value:'2']],

specificationOptions:[{label:’Single core ‘,

                    value:'1'},
                  {label:'Three core ',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
 
},

//Producer clicks

  workerClick() {
 this.$router.push({name:'Search', params:{type : 3}})
},
//Attachment category click eventsDeviceClick () {Document.activeElement.blur ();This.popupVisible1 = true},/ / / structure or process click eventsSTruckClick () {Document.activeElement.blur ();This.popupVisible2 = true},/ / install form click eventInstallatIonClick () {Document.activeElement.blur ();This.popupVisible3 = true},/ / specification click eventSpecificationCLick () {Document.activeElement.blur ();This.popupVisible4 = true},/ / system nominal voltage click eventsSystemVoltageCLick () {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 requestThis.$http ({Url: '',Method:'POST',/ / request for weight transmission dataData: completeFiles,/ / set the request headerHeaders: {'COntent-Type':'x-www-from-urlencoded'}}).Then (response => {/ / requestSuccessful callbackLet code = JSON.parse (response.result);If (code = = = 0) {Toast ('success');}}, response => {/ / request failed callback});}},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 0:

v-model Not modle

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *