Home > Article > Web Front-end > 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!