鍍金池/ 問答/HTML5  HTML/ 使用nuxt框架,用router-link跳轉(zhuǎn)后,頁面組件不顯示

使用nuxt框架,用router-link跳轉(zhuǎn)后,頁面組件不顯示

使用nuxt框架,有A、B兩個(gè)頁面

A頁面跳轉(zhuǎn)到b頁面通過url傳遞商品信息給B頁面

B頁面能夠拿到信息并復(fù)制給data中g(shù)oodsList賦值,但是頁面不能按照goodsList來渲染頁面

在B頁面點(diǎn)擊刷新就能夠正常渲染頁面

請(qǐng)問怎么能夠通過路由跳轉(zhuǎn)也能正常渲染頁面

A頁面就是帶著參數(shù)通過router-link跳轉(zhuǎn)就不發(fā)代碼了

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") 確認(rèn)


</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參數(shù) 
        let _goodsList= JSON.parse(req.goodsList)
        
        this.goodsList.push(...__goodsList)
        console.log(this.goodsList)

    },

}

</script>

console出來的明明有數(shù)據(jù)

clipboard.png

但是頁面不渲染

clipboard.png

如果手動(dòng)點(diǎn)擊刷新就能正常顯示出來(url中已帶有參數(shù))

clipboard.png

---------更新 18.7.4-------------
目前我將created中加了個(gè)0秒的定時(shí)器就好了,請(qǐng)問這是什么原因,created后vue應(yīng)該已經(jīng)監(jiān)聽數(shù)據(jù),那應(yīng)該不加定時(shí)器也可以。

 created() {
          
        settimeout(()=>{
             const req = GetRequest()//獲得url參數(shù) 
            let _goodsList= JSON.parse(req.goodsList)
        
            this.goodsList.push(...__goodsList)
            console.log(this.goodsList)
        
        },0)  
       

    },
回答
編輯回答
貓小柒

this.goodsList.push(...__goodsList)這里不能使用push,vue不能監(jiān)聽不存在的屬性,可以使用set或$set

2017年10月26日 23:40