How to use the on-change attribute in IView

This time I will bring you the on-changepropertyhow to use it in IView, what are the notesfor using the on-change property in IView, the following is a practical case, let’s take a look take a look.

Problem generated

I just studied the awesome framework of vue with my colleagues. It implements small functions of three-level linkage at the provincial and municipal levels. 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, various problems arise due to the inconsistency between js, htmlcode specifications and vue, such asonchange = "", @change="" does not work in iview. Finally, through Google, a powerful search index engine, the problem was solved,

Solve the problem

The correct writing method 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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for vue to process storejs data acquisition

Do not restart Vim but reload it What are the methods of .vimrc

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