Detailed explanation based on the use of on-change attribute in IView

Below I will share with you a detailed explanation of the use of the on-change attribute in IView. It has a good reference value and I hope it will be helpful to everyone.

I am an android developer. Due to work needs, I have also dabbled in backend and front-end code. For the past two days, I have been troubled by the onchange in the input tag. I have been dizzy and tossing and turning. I won’t say much nonsense. Let’s talk about the problems encountered and their solutions.

The problem arises

I just studied the awesome framework of vue with my colleagues before, which realizes the three-level linkage of provincial and municipal small Function, part of the code is as follows:

<Form-item label="所在地区" >
   <Row >
   <Col span="12">
   <select v-model="f.p" @change="selpro" placeholder="sheng">
    <option :value="i" v-for="(v,i) in pro">{{v.name}}</option>
   </select>
   </Col>
   <Col span="12">
   <select v-model="f.c" @change="selcity" placeholder="shi">
    <option :value="i" v-for="(v,i) in city">{{v.name}}</option>
   </select>
   </Col>
   <Col span="12">
   <select v-model="f.cc" v-show="county.length>0" @change="result" placeholder="xian"> 
    <option :value="i" v-for="(v,i) in county">{{v.name}}</option>
   </select>
   </Col>
   </Row>
  </Form-item>

After the front-end interface is written in vue, when the front-end and back-end codes are merged into the same project, because of the js and html code The inconsistency between the specification and vue caused various problems. For example, onchange="", @change="" did not work in iview. In the end, the problem was solved through Google, a powerful search engine,

Solution to the problem

The correct way to write it in iview should be: @on-change

<Form-item label="所在地区">
    <Row>
     <i-col span="12">
      <i-select v-model="f.p" @on-change="selpro" placeholder="sheng">
       <i-option :value="i" v-for="(v,i) in pro" :key="v.id">{{v.name}}</i-option>
      </i-select>
     </i-col>
     <i-col span="12">
      <i-select v-model="f.c" @on-change="selcity" placeholder="shi">
       <i-option :value="i" v-for="(v,i) in city" :key="v.id">{{v.name}}</i-option>
      </i-select>
     </i-col>
     <i-col span="12">
      <i-select v-model="f.cc" v-show="county.length>0" onchange="result" placeholder="xian">
       <i-option :value="i" v-for="(v,i) in county" :key="v.id">{{v.name}}</i-option>
      </i-select>
     </i-col>
    </Row>
   </Form-item>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

js canvas implements sliding puzzle verification code function

JS method to convert from non-array object to array Summary

#In-depth understanding of Node module module

##

The above is the detailed content of Detailed explanation based on the use of on-change attribute in IView. For more information, please follow other related articles on the PHP Chinese website!