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.代码解析