Explication détaillée basée sur l'utilisation de l'attribut on-change dans IView

Ci-dessous, je partagerai avec vous une explication détaillée de l'utilisation de l'attribut on-change dans IView. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Je suis un développeur Android. En raison de mes besoins professionnels, j'ai également essayé le code backend et front-end. Au cours des deux derniers jours, j'ai été troublé par le changement dans la balise d'entrée que j'ai. J'ai été étourdi et je me suis retourné. Je ne dirai pas beaucoup de bêtises. Parlons des problèmes rencontrés et de leurs solutions.

Des problèmes surviennent

Je viens d'étudier le superbe cadre de vue avec mes collègues auparavant, qui réalise le lien à trois niveaux entre les gouvernements provincial et municipal. petite fonction, une partie du code est la suivante :

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

Une fois l'interface front-end écrite en vue, lorsque le front-end et le back-end -end les codes sont fusionnés dans le même projet, car js, L'incohérence entre la spécification du code HTML et Vue a causé divers problèmes, par exemple, onchange="", @change="" n'a finalement pas fonctionné dans iview. le problème a été résolu grâce à Google, un moteur de recherche puissant

Résoudre le problème

La bonne façon de l'écrire dans iview est : @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>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

js+canvas implémente la fonction de code de vérification de puzzle coulissant

JS convertit un objet non-tableau en array Résumé de la méthode

Compréhension approfondie du module Node

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!