鍍金池/ 問(wèn)答/數(shù)據(jù)庫(kù)  HTML/ vue 列表根據(jù)路由改變,但路由改變后列表沒(méi)有變化?

vue 列表根據(jù)路由改變,但路由改變后列表沒(méi)有變化?

js

menuList:{
A:{list:[1,2,3],name:'A set'},
B:{list:[4,5,6],name:'B set'}
}

 methods: {
        reloading: function(obj) {
            console.log(obj.name);
            this.articleType = obj.name;
            this.DyComp.model = obj.model;
            this.dataUriPosTitle = obj.name;
            this.$router.push({
                path:
                    "/sub/" +
                    this.$route.params.type +
                    "/" +
                    obj.Dtype +
                    "/" +
                    obj.dataUri
            });
        },
        arrObjFind: function(arr, key, value) {
            var x;
            arr.map(function(obj, index) {
                console.log(key, obj[key], value, "kv");
                if (obj[key] == value) {
                    x = obj;
                }
            });
            return x;
        },
        loadDefault: function() {
            console.log(this.$route.params.type, "loaddefault");
            var vm = this;
            var name = this.menuList[this.$route.params.type].name;
            var list = this.menuList[this.$route.params.type].list;
            var dataUri = list[0].dataUri;
            this.articleType = list[0].name;
            this.menuPos = 0;
            console.log(this.$route.params.type, list);
            this.DyComp.model = list[0].model;
            this.DyComp.data = { ...this.DyComp.data, dataUri };
            console.log(this.DyComp, "Dycomp");
        }
    },
    watch: {
        $route: function() {
            console.log("sub`s route changed");
            var vm = this;
            var dataUri = this.$route.params.dataUri;
            var Dtype = this.$route.params.Dtype;
            var articleTypeFresh = vm.arrObjFind(
                vm.menuList[vm.$route.params.type].list,
                "dataUri",
                vm.$route.params.dataUri
            );
            console.log(dataUri, Dtype, vm.DyComp.model, "dataUri");
            this.NowMenu = this.menuList[this.$route.params.type];
            if (dataUri) {
                console.log(dataUri, Dtype, "sub watch actived");

                vm.DyComp.model = vm.Dtypes[Dtype];
                vm.DyComp.data = { ...vm.DyComp.data, dataUri };
                if (articleTypeFresh) {
                    vm.articleType = articleTypeFresh.name;
                }
                console.warn(
                    vm.arrObjFind(
                        vm.menuList[vm.$route.params.type].list,
                        "dataUri",
                        vm.$route.params.dataUri
                    ),
                    vm.$route.params.dataUri,
                    vm.menuList[vm.$route.params.type].list,
                    "issssssssssssss"
                );
                console.log(vm.DyComp, "watch Dycomp");
            } else {
                console.warn("no dataUri");
                this.loadDefault();
            }
        }
    },

template

//預(yù)期
                <div class="subTitle">
                    {{menuList[$route.params.type].name}}
                </div>
                <ul>
                   
                    <li v-for="(item,index) in menuList[$route.params.type].list" :key="index">
                        <a @click="reloading(item)">
                        {{item.name}}
                        </a>
                    </li>
                   

                </ul>
//實(shí)際
<ul>
   <li v-for="(item,index) in menuList[$route.params.type].list" :key="index">
       <input type="radio" :name="menuList[$route.params.type].name" :value="index" :id="'R'+menuList[$route.params.type].name+index" v-model="menuPos">
       <label track-by="$index" :for="'R'+menuList[$route.params.type].name+index" @click="reloading(item)">
                            {{$route.params.type}}
                            {{item.name}}
       </label>
   </li>

</ul>

思路是,路由的type是A時(shí),加載A的列表[1,2,3],路由的type是B時(shí),加載B的列表[4,5,6]

router:
/pages/:type/:DataModel/:DataUri
點(diǎn)擊列表項(xiàng),會(huì)設(shè)置DataModel和DataUri。
預(yù)期是,由A到B,列表也會(huì)自動(dòng)變化。

點(diǎn)擊A(特色服務(wù))
/pages/A
列表:[1,2,3]

clipboard.png

上面的是預(yù)期,下面的是實(shí)際顯示

點(diǎn)擊1
/pages/A/m/1

clipboard.png

點(diǎn)擊B(關(guān)于我們)
/pages/B
列表:[1,5,6] (預(yù)期是4,5,6)

clipboard.png

目前能發(fā)現(xiàn)的是,li中不使用label時(shí)似乎就可以,但是使用了label標(biāo)簽之后就不可以了。

回答
編輯回答
舊時(shí)光

可以根據(jù)以下兩個(gè)問(wèn)答解決問(wèn)題,結(jié)論是:key最好在數(shù)據(jù)變化時(shí)發(fā)生變化。key如果相同的話,列表不會(huì)全刷新。

Vue+Element-UI出現(xiàn)bug,刪除v-for列表中一項(xiàng)時(shí)數(shù)據(jù)對(duì)不上了

2018年1月19日 06:41