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先隐藏元素,更新的数组排序处理好了,才显示元素