Modal是什麼？

modal：模態對話方塊，在浮層中顯示，引導使用者進行相關操作。（摘自iview官方文件）

Modal能做什麼？

除了官方文件上寫的用法之外，還有一種就是自定義modal，即使用者根據自己的需求，對modal彈框裡的內容進行修改，以達到完成需求的目的。 在我上週做的一個專案裡，有一個需求就是點選一個醫生卡片，可以展示醫生的資訊，並可以在對話方塊中進行修改。剛開始效果是這樣的： 我們看一下程式碼：

<template>
 <Row class="card-doctor">
      <Col span="5" v-for="(value,index) in formInline"
 
 :key="value.index">
        <Card>
          <div style="text-align:center" >
              <img class="doctor-img" :src="doctor" alt="">
              <p>醫生姓名:{{value.doctor_name}}</p>
              <p>醫生職稱:{{value.doctor_place}}</p>
              <p>
 
從醫年限:{{value.doctor_job}}年</p>
              <p>擅長病種:{{value.doctor_special}}</p>
              <p>醫生簡介:{{value.doctor_message}}</p>
              <Button type="primary" @click="correct(index)">點選進行修改</Button>
              <Modal
                v-model="modal1"
                title="修改醫生資訊"
                @on-ok="ok"
                @on-cancel="cancel"
                cancelText= '刪除'
                :closable="false"
                :mask-closable="false"
                >
                <
 
Form>
                  </FormItem>
                    <Input v-model="formInline.doctor_name" class="correctinput" placeholder="醫生姓名" name="name">
                      <Icon type="ios-contact-outline" slot="prefix" />
                    </Input>
                  </FormItem>
                  <Input v-model="formInline.doctor_place" placeholder="醫生職稱" class="correctinput" name="goal">
                    <Icon type="ios-briefcase-outline" slot="prefix" />
                  </Input>
                  <Input v-model="formInline.doctor_job" placeholder="從醫年限" class="correctinput" name="time">
                    <Icon type="ios-bookmark-outline" slot="prefix" />
                  </Input>
                  <Input v-model="formInline.doctor_special" placeholder="擅長病種" class="correctinput" name="special">
                    <Icon type="ios-medkit-outline" slot="prefix" />
                  </Input>
                  <Input v-model="formInline.doctor_message" placeholder="醫生簡介" class="correctinput" name="desc">
                    <Icon type="ios-paper-outline" slot="prefix" />
                  </Input>
                </Form>
              </Modal>
          </div>
        </Card>
      </Col>
      <div  @click="Add" class="add">
        <Col span="5" class="add">
          <Card>
            <div style="text-align:center">
                <Icon class="md-add" type="md-add" size="200" />
            </div>
          </Card>
        </Col>
      </div>
 </Row>
</template>

經過測試，當有一個醫生物件的時候修改是完全沒問題的，但是當有多個醫生物件時，就會出現無論點選哪個醫生，彈出對話方塊對應的資料都是與最後一個醫生物件相對應的： 後來找到了渲染出現問題的原因：我把modal元件放到了迴圈裡，因此這一個彈框被迴圈了多個，但是它們卻有著共同的v-model（modal1），這就使得無論點一個按鈕時，雖然說對應的資料渲染成功了，但是由於modal的名字相同，使得只能顯示最後一個被迴圈的物件。

解決的方法：就是把這個modal放到迴圈外面，初始只有一個彈層，通過點選按鈕事件，將對應的資料傳到一個數組裡，進行渲染，這樣就不會出現上述的問題了。

<template>
 <Row class="card-doctor">
      <Col span="5" v-for="(value,index) in formInline" :key="value.index">
        <Card>
          <div style="text-align:center" >
              <img class="doctor-img" :src="doctor" alt="">
              <p>醫生姓名:{{value.doctor_name}}</p>
              <p>醫生職稱:{{value.doctor_place}}</p>
              <p>從醫年限:{{value.doctor_job}}年</p>
              <p>擅長病種:{{value.doctor_special}}</p>
              <p>醫生簡介:{{value.doctor_message}}</p>
              <Button type="primary" @click="correct(index)">點選進行修改</Button>
          </div>
        </Card>
      </Col>
      <div  @click="Add" class="add">
        <Col span="5" class="add">
          <Card>
            <div style="text-align:center">
                <Icon class="md-add" type="md-add" size="200" />
            </div>
          </Card>
        </Col>
      </div>
      <div class="correct">
        <Modal
          v-model="modal1"
          title="修改醫生資訊"
          @on-ok="ok"
          @on-cancel="cancel"
          cancelText= '刪除'
          :closable="false"
          :mask-closable="false"
          >
          <Form>
            </FormItem>
              <Input v-model="correctdoc.doctor_name" class="correctinput" placeholder="醫生姓名" name="name">
                <Icon type="ios-contact-outline" slot="prefix" />
              </Input>
            </FormItem>
            <Input v-model="correctdoc.doctor_place" placeholder="醫生職稱" class="correctinput" name="goal">
              <Icon type="ios-briefcase-outline" slot="prefix" />
            </Input>
            <Input v-model="correctdoc.doctor_job" placeholder="從醫年限" class="correctinput" name="time">
              <Icon type="ios-bookmark-outline" slot="prefix" />
            </Input>
            <Input v-model="correctdoc.doctor_special" placeholder="擅長病種" class="correctinput" name="special">
              <Icon type="ios-medkit-outline" slot="prefix" />
            </Input>
            <Input v-model="correctdoc.doctor_message" placeholder="醫生簡介" class="correctinput" name="desc">
              <Icon type="ios-paper-outline" slot="prefix" />
            </Input>
          </Form>
        </Modal>
      </div>
 </Row>
</template>

總結

當頁面有單個彈框時不要迴圈，初始化的時候將其置為空的，點選觸發的方法裡將資料填進去即可。