使用nuxt框架,有A、B两个页面
A页面跳转到b页面通过url传递商品信息给B页面
B页面能够拿到信息并复制给data中goodsList赋值,但是页面不能按照goodsList来渲染页面
在B页面点击刷新就能够正常渲染页面
请问怎么能够通过路由跳转也能正常渲染页面
A页面就是带着参数通过router-link跳转就不发代码了
B页面代码
<template lang="pug">
div.page
mt-header(title="选择缺货商品")
router-link( to="/order/orderDetail" slot="left")
mt-button(icon="back")
div.goodsList
card(v-for="(item,index) in goodsList"
:key="index"
:isStock="true"
:price="item.price"
:orginalPrice="item.orginalPrice"
:goodId="item.goodId"
:goodName="item.goodName"
@card-select="getSelect" )
div.btn.center-center(@click="confirm") 确认
</template>
<script>
import card from "../components/card"
import { Toast } from "mint-ui"
import { refuseOrder } from "../../../../apis/index.js"
import { GetRequest } from "../../../../plugins/utils.js"
export default {
data: function () {
return {
goodsList: [
// {
// price: 10,
// orginalPrice: 20,
// count: 2,
// goodId: 1,
// goodName: "可乐",
// imgUrl: "../../../assets/images/default.png"
// }
],
selectList: [ //选择商品的ID列表
// {
// goodsProviderID:"xx"
// goodsStock:0
// }
],
orderID: null,
statusDesc: "商品缺货",
}
},
components: {
card: card
},
methods: {
...any
},
created() {
let _that = this
const req = GetRequest()//获得url参数
let _goodsList= JSON.parse(req.goodsList)
this.goodsList.push(...__goodsList)
console.log(this.goodsList)
},
}
</script>
console出来的明明有数据
但是页面不渲染
如果手动点击刷新就能正常显示出来(url中已带有参数)
---------更新 18.7.4-------------
目前我将created中加了个0秒的定时器就好了,请问这是什么原因,created后vue应该已经监听数据,那应该不加定时器也可以。
created() {
settimeout(()=>{
const req = GetRequest()//获得url参数
let _goodsList= JSON.parse(req.goodsList)
this.goodsList.push(...__goodsList)
console.log(this.goodsList)
},0)
},
this.goodsList.push(...__goodsList)
这里不能使用push,vue不能监听不存在的属性,可以使用set或$set