집 >웹 프론트엔드 >JS 튜토리얼 >IView의 on-change 속성 사용에 따른 자세한 설명

IView의 on-change 속성 사용에 따른 자세한 설명

亚连원래의: 2018-05-30 10:47:344577검색

아래에서는 IView의 on-change 속성 사용에 대한 자세한 설명을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

저는 업무상 백엔드와 프론트엔드 코드도 다루면서 입력 태그의 onchange 때문에 고민을 했습니다. 더 이상 고민하지 말고 다음에 무슨 일이 일어났는지 말씀드리겠습니다.

문제가 발생했습니다

저는 이전에 동료들과 함께 지방 및 지방자치단체 수준의 3단계 연결의 작은 기능을 구현하는 vue의 멋진 프레임워크를 연구했습니다.

<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>

for front-end 인터페이스 vue를 작성한 후 프론트엔드와 백엔드 코드를 동일한 프로젝트로 병합할 때 js와 html 코드 사양과 vue 간의 불일치로 인해 onchange와 같은 다양한 문제가 발생했습니다. ="", @change="" in iview 작동하지 않았습니다. 결국 강력한 검색엔진인 Google을 통해 문제가 해결되었습니다.

문제를 해결했습니다.

iview에 쓰는 올바른 방법. @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>

위에서 모든 사람을 위해 정리했습니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

IView의 on-change 속성 사용에 따른 자세한 설명

관련 기사