vue v-model 雙向綁定+watch監聽事件

（一）項目需求+效果圖

1.需求

（1）點擊搜索框，跳轉頁面，在搜索框下方顯示具體的模塊。
（2）點擊具體模塊，將點擊的內容綁定到搜索框，同時查詢出該模塊的內容。
（3）刪除搜索框內容，再次出現所有模塊。

2.效果圖：

（二）代碼+代碼解析

1.代碼：

<template>
        <div id="type">
        <!--第一部分： 標題欄 -->
        <van-nav-bar
        title="我的審批"
        right-text="更多"
        left-arrow
         @click-left="onClickLeft"
         @click-right="onClickRight"/>   
        <form action="/">
          <van-search
          v-model="processName"
          placeholder="請輸入學生姓名" 
          shape="round" 
          /> 
        <!-- 第二部分：點擊搜索框時，顯示的下拉菜單 -->
        <van-row>
        <!-- 後端顯示的數據，每行顯示3個，超過3個，自動到下一行 -->
        <van-col span="8" v-for="(item, i) of allProcessName" :key="i" justify="center"> 
          <van-cell-group v-show="isShow" @click="searchDetail(i)">
          <van-field v-model="allProcessName[i] "/>
          </van-cell-group>
        </van-col>
        </van-row> 
         <!-- 第三部分：內容(引入公共組件庫) -->
        <headComponent :type="typelist"></headComponent>   
        <div class="card" v-for="(item,index) in typelist" :key="index" @click="detail" style="margin-top:1%;">
        <!-- 吸頂距離 -->
        <van-sticky :offset-top="10">
          <!-- 控制標題距離左邊距離 -->
          <div style="margin-left:5%;">
            <!-- 換行符 -->
            <br />
            <!-- 狀態顏色大小公共樣式 -->
            <p class="sates">{{typelist[index].detailListModels[0].title}}</p>
            <br />
            <br />
              <!-- 卡片顯示第一行數據 -->
                <a class="titles">{{typelist[index].detailListModels[0].title}}:</a>
                <a class="titles">{{typelist[index].detailListModels[0].content}}</a>
                <br/>
                <br/>
                <!-- 卡片顯示第二行數據 -->
                <a class="titles">{{typelist[index].detailListModels[1].title}}:</a>
                <a class="titles">{{typelist[index].detailListModels[1].content}}</a>
          </div>
        </van-sticky>
      </div>  
        </form>
        </div>     
</template>
<script>
import headComponent from '@/components/headComponent'
export default {
  data () {
    return {
      //後端返回的detailContent存放
      allProcessName: [],
      processName:'',
      processId:[],
      typelist: [],
      isShow:true
    }
  },
  components: {
    headComponent
  },
  methods: {
      detail(){
        //點擊卡片，查看詳情
        this.$router.push({name:'approvalDetail'})
      },
      onClickLeft(){
        //點擊左側按鈕，回到初始化界面
        this.$router.push({name:'initApproval'})
      },
      onClickRight(){
        //點擊導航欄更多按鈕，跳轉到更多頁面
         this.$router.push({name:'moreSpecificApproval'})
      },
     test(){    
        var vm = this;        
        // 調用後端查詢的地址
        var url = process.env.VUE_APP_BACKEND_URL + "/groupProcess/secondProcess/11";
        // 後端地址爲get請求
        this.$axios.get(url).then((response) => {  
            //循環數組裏的值
            for (let index = 0; index < response.data.data.length; index++) {
              vm.processId.push(response.data.data[index].processId);
              vm.allProcessName.push(response.data.data[index].processName);
            }       
            //如果流程名稱有值，則顯示
            if(vm.allProcessName){
              vm.isShow=true; 
            }         
          }, (error) => {
            //發生錯誤時，輸出錯誤信息
              console.log(error);               
          });       
          
     },
     searchDetail(i){      
       var vm=this;
       //點擊具體模塊，和搜索框，雙向綁定
       vm.processName = this.allProcessName[i];    
        vm.isShow=false
       //點擊具體模塊，所有模塊，不顯示
       vm.isShow=false;     
       console.log(vm.processName);     
       var url = process.env.VUE_APP_BACKEND_URL +  '/detail/selectApprovalByProcessId/2/11'      
       this.$axios.get(url).then((response) =>{
            for (let index = 0; index < response.data.data.length; index++) { 
              vm.typelist = response.data.data;                                   
            }           
          }, (error) => {
            //發生錯誤時，輸出錯誤信息
              console.log(error);   
       })
     }  
  },
  //頁面初始化時顯示的內容
    created() {
       this.test();
    },
    //監聽搜索框的變化
    watch:{
      //當搜索框沒有數據時，顯示具體模塊，同時隱藏具體模塊的內容
      processName(newVal){        
        if (newVal == "") {
          this.isShow = true;
          this.typelist = false
        }
      }
    }
};

2.代碼解析