使用nuxt框架,用router-link跳转后,页面组件不显示

使用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出来的明明有数据

clipboard.png

但是页面不渲染

clipboard.png

如果手动点击刷新就能正常显示出来(url中已带有参数)

clipboard.png

---------更新 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)  
       

    },
阅读 4.7k
1 个回答

this.goodsList.push(...__goodsList)这里不能使用push,vue不能监听不存在的属性,可以使用set或$set

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题