1、vue项目加载本地json文件

方法一

前期联调没有后台数据的情况下，加载本地json数据

1、创建json文件 src/mock/applist.js

module.exports ={"data":
	//json
}

2、引用 import applist from ‘@/mock/applist.js’ // 引入

data(){
      return{
        isMock:1,//1伪数据
       }
    if(this.isMock == 1){
	let res = applist
        console.log(res )
      }else{
        this.getUserListAll();  //掉接口
      }

2、弹框组件引用

1、页面引用

<template>
<!-- 确认单申请 -->
  <div class="supplierlist-wrap wrapper">
  <!-- 详情弹窗 -->
    <el-dialog
      custom-class="supplier-detail-box"
      :visible.sync="dialog_visible"
       v-if="dialog_visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      width="80%"
      top="15vh">
       <cfmApplyAdd  :deatilData="deatilData" @close="detailDialog" @success="successDialog" />
      </el-dialog>
  </div>
  </template>

2、import引入

import cfmApplyAdd from './cfmapply/CfmApplyAdd'

3、components中写入子组件

 components: {
     cfmApplyAdd,
    },

4、新建CfmApplyAdd.vue文件

3、 v-for渲染数据一行多列

i%2==0是template数据，里面的用数组[i+1]就可以得到值

 <div id="app">
        <table>
            <template v-for='(item,i) in expertArr' v-if='i%2==0'>
                <tr>
                    <td>
                        <div class="col">
                            {{item.name}}
                        </div>
                    </td>
                    <td v-if='i+1<expertArr.length'>
                        <div class="col pl">
                            {{expertArr[i+1].name}}
                        </div>
                    </td>
                </tr>
            </template>
        </table>
    </div>

 data: {
            expertArr:[
                {"id":01,"name":"吴安杰-1"}, 
                {"id":02,"name":"吴安杰-2"},
                {"id":03,"name":"吴安杰-3"},
                {"id":04,"name":"吴安杰-4"},
                {"id":05,"name":"吴安杰-5"}]
        }

4、Vue elementui 多张图为一组轮播展示

let res1 = [
     { src: "001", title: "标题1" },
     { src: "002", title: "标题2", },
     { src: "003", title: "标题3", },
     { src: "004", title: "标题4", },
     { src: "005", title: "标题5", },
     { src: "006", title: "标题6", },
   ]

   let res2 = [
     {
       imgs: [
         { src: "001", title: "标题1" },
         { src: "002", title: "标题2", },
         { src: "003", title: "标题3", },
         { src: "004", title: "标题4", }
       ],
     },
     {
       imgs: [
         { src: "005", title: "标题5", },
         { src: "006", title: "标题6", }
       ]
     }
   ]
// res1改造成res2数组，轮播图遍历res2.imgs
// arr 原数组 n几张为1组
   function groupByNum(arr, n) {
     var newArr = [];
     arr.forEach((v, i) => {
       if (i % n === 0) {
         newArr.push({ imgs: [] });
       }
       newArr[newArr.length - 1]['imgs'].push(v);
     });
     return res2;
   }
    console.log(JSON.stringify(groupByNum(res1, 4)))
    //[{"imgs":[{"src":"001","title":"标题1"},{"src":"002","title":"标题2"},{"src":"003","title":"标题3"},{"src":"004","title":"标题4"}]},{"imgs":[{"src":"005","title":"标题5"},{"src":"006","title":"标题6"}]}]
    // vue templete 代码
    <el-carousel-item v-for="(obj,index) in expertArr">
       <el-col v-for="(item,i) in obj.imgs"/>
   ```
# 5、Tabs 标签页动态绑定:label
```js
//Tabs 标签页动态绑定label
<el-tabs v-model="activeName" @tab-click="handleClick">
   <el-tab-pane label="待预定" name="first">
   </el-tab-pane>
   <el-tab-pane label="待取消" name="second">
   </el-tab-pane>
   <el-tab-pane label="待离店" name="third">
   </el-tab-pane>
 </el-tabs>
 // 页面
     <el-tab-pane name="first">
       <template slot="label">
         待预定<span class="cored">（{{statusCount.waitBookingCount}}）</span>
       </template>
     </el-tab-pane>
     // data
      statusCount: {
       waitBookingCount: '',
       waitCancelCount: '',
       waitAdvanceCheckOutCount: ''
     },
     // 方法
   getStatusCount () {
     // 待预定(66)  待取消(70) 待商店(88)
     setTimeout(() => {
       let res = {
         'waitBookingCount': '50',
         'waitCancelCount': '60',
         'waitAdvanceCheckOutCount': '100'
       }       
       this.statusCount = res
     }, 100);
   },

6、attrs和listeners

    v-bind="$attrs"  //将A组件的数据传递给C组件 
    v-on="$listeners"
//$listeners 属性，我们在b组件上 绑定 v-on=”$listeners”, 在a组件中，监听c组件触发的事件。就能把c组件发出的数据，传递给a组件

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

7、vue强制更新$forceUpdate()

  添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
  调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

8、vant下拉组件点击循环处理关闭

     <van-dropdown-item :title="`筛选${index}`"
                          :ref="`item${index}`"
                          v-for="(item,index) in 3"
                          :key="index">
         <van-cell center
                   :title="`包${index}邮`">
           <template #right-icon>
             <van-switch v-model="switch1"
                         size="24"
                         active-color="#ee0a24" />
           </template>
         </van-cell>
         <div style="padding: 5px 16px;">
           <van-button type="danger"
                       block
                       round
                       @click="onConfirm(index)">
             确认{{index}}
           </van-button>
         </div>
       </van-dropdown-item>
     </van-dropdown-menu>

 onConfirm (index) {    
     this.$refs[`item${index}`][0].toggle()
   },

ref的值变成活动，因为是for循环 :ref="item${index}"，click事件传值index过去，下面接收处理 this. $refs[`item$ {index}`][0].toggle()，这个地方是重点，主要还是之前不明确ref的值，

总结： 1、v-for的时候:ref应该是变量 2、对真正定位到ref的状态不清楚，是一个VueComponent{}对象

9、可以使用this.$set()来进行强制更新，进而解决问题

　对象操作：

　三个参数：this.$set("改变的对象"，"改变的对象属性"，"值")

　数组操作：

　三个参数：this.$set("数组"，"下标"，"值")

对数据整体进行操作：

三个参数：this.$set(this，"要更新的数据名"，"更改的数据")

vue项目问题记录