post传值问题

1.下载 cnpm install qs
import qs from 'qs'

post传值后台收不到 需要用qs转换一下数据
 post('http://localhost:8080/api', qs.stringify(this.addCategoryName))

img动态路径

解决办法：数组里面图片的路径要写成如下：

image:require('../assets/img/login.png')
渲染的时候要写

<img :src="item.image" />
具体事例

<a-menu
        v-for="(v, i) in navData"
        :key="i"
        :default-selected-keys="['/account/home']"
        :selected-keys="[v.key]"
        mode="inline"
        type="inner"
        class="accout_menu"
        @openChange="onOpenChange"
      >
        <a-menu-item key="v.key">
          <router-link :to="{ name: v.name }">
            <img :src="v.src" class="menu_account_image" />
            <span class="menu_account_title">{
    
    {
    
     v.title }}</span>
          </router-link>
        </a-menu-item

:src=" "
8080端口下找的是public下的文件，所以找不到
方法一

v-for
 <img
          style="width:100%;height:100%;"
          :src="require('../'+item.imgSrc)"
        />


图片存放在assets/banner/banner.jpg
  imgs: [{
    
    
        id: '01',
        imgSrc: 'assets/banner/banner1.jpg',
      }, {
    
    
        id: '02',
        imgSrc: 'assets/banner/banner2.png'
      }, {
    
    
        id: '03',
        imgSrc: 'assets/banner/banner3.jpg'
      }]

方法2

<img
          style="width:100%;height:100%;"
          :src="item.imgSrc"
        />
import img1 from '../assets/banner/banner1.jpg'
 imgs: [{
    
    
        id: '01',
        imgSrc: img1,
      },]

vue更新数据却不渲染页面解决方案

Vue不能检测通过数组索引直接修改一个数组项，由于JavaScript的限制，Vue不能检测数组和对象的变化
1.使用set设置数组

this.$set(arr,index,newVal)

this.$forceUpdate()

checkClick (item) {
    
    
    item.check =! item.check;
    this.$forceUpdate() 
},

3.路由参数变化时，页面不更新，本质上就是数据没有更新
在这里插入图片描述
通过watch监听$route的变化

watch: {
    
    
    '$route': function() {
    
    
 
     }
}

4.在异步更新执行之前操作DOM数据不会变化
原因：Vue在更新DOM时是异步执行。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一个事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“nextTick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
nextTick：在下一次dom更新循环结束之后，执行回调函数
解决办法：

this.$nextTick(function(){
    
     })

在这里插入图片描述

5.获取后台返回的数组进行排序处理了，页面内容却不排序
原因：显示的元素不会动

解决办法：

使用v-if先隐藏元素，更新的数组排序处理好了，才显示元素

vue自己项目遇到的一些问题及解决方法

vue

post传值问题

img动态路径

vue更新数据却不渲染页面解决方案

猜你喜欢