Home  >  Article  >  Web Front-end  >  Detailed explanation based on the use of on-change attribute in IView

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

亚连
亚连Original
2018-05-30 10:47:344538browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn