Fatal编程技术网
  • vuejs2/
  • Vuejs2 将计算数据作为道具传递给子组件的模式（承诺问题）

Vuejs2 将计算数据作为道具传递给子组件的模式（承诺问题）

vuejs2

Vuejs2 将计算数据作为道具传递给子组件的模式（承诺问题）,vuejs2,Vuejs2,我想知道如何将计算出的变量传递给子组件（在插槽中）。主组件通过使用post请求来修改对象数组。实际上，变量“branchs”似乎被一个表示结果数据的空承诺所填充。因此，我得到一个警告，因为列表组件希望“分支”是一个数组。我试图通过使用“v-if=”Array.isArray（branchs）”或在计算方法（“syncedbranchs”）中设置的标志来延迟插槽内容的呈现，但这些似乎都不能做到这一点 如何延迟该列表的呈现，直到“分支”是一个填充的对象数组？我不应该使用计算的var并通过getter

我想知道如何将计算出的变量传递给子组件（在插槽中）。主组件通过使用post请求来修改对象数组。实际上，变量“branchs”似乎被一个表示结果数据的空承诺所填充。因此，我得到一个警告，因为列表组件希望“分支”是一个数组。我试图通过使用“v-if=”Array.isArray（branchs）”或在计算方法（“syncedbranchs”）中设置的标志来延迟插槽内容的呈现，但这些似乎都不能做到这一点

如何延迟该列表的呈现，直到“分支”是一个填充的对象数组？我不应该使用计算的var并通过getter传递数据吗

主要成分


内容寄存器1
内容寄存器2
#branchesWidget{
最小宽度：150px；
最小高度：150px；
背景色：#333；
}
#branchesWidget:悬停{
背景色：#666；
}
从“chroma js”导入色度；
//console.log（'chroma'，chroma）；
从“hsluv”进口HUSL；
//console.log（'HUSL'，HUSL）；
从“/BranchesWidgetTabs”导入BranchesWidgetTabs；
从“/BranchesWidgetList”导入BranchesWidgetList；
常数随机=函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
};
var generateColors=函数（n，startHex='#ff6000'，padding=0，step=5，randomSat=true，randomLight=true）{
让颜色=[]；
常量baseHex=HUSL.hexToHsluv（startHex）；
常量baseHue=baseHex[0]；
//console.log（'baseHue'，baseHue）；
变量度=[]；
for（设i=0；i{
返回（基色+偏移量）%360；
});
//console.log（'hues'，hues）；
中频（随机卫星）{
var BaseStation=随机（55,85）；
}否则{
var BaseStation=baseHex[1]；
}
if（随机光）{
var baseLightness=随机（35,75）；
}否则{
var baseLightness=baseHex[2]；
}
var subs=Math.min（n，Math.max（步骤2））；
for（设i=0；i
制表符成分

<template>
    <div class="BranchesWidgetTabs">
        <div class="menu">
            <div class="item" v-for="(item, index) in list">
                <div>
                    <div class="i">
                        <div v-if="item.active">active</div>
                    </div>
                    <div class="title">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <div class="spacer"></div>
        </div>
        <div class="tabbody" v-for="(item, index) in list">
            <div class="content" v-if="item.active">
                <slot :name="`tabbody_${index}`"></slot>
            </div>
        </div>
    </div>
</template>

<style>
    div.BranchesWidgetTabs {

        background-color: yellow;
        min-height: 40px;
    }
    div.BranchesWidgetTabs > div.menu {
        display: flex;
        flex-direction: row;
    }
    div.BranchesWidgetTabs > div.menu > .item {
        flex: 0 0 auto;
        min-width: 10px;

        background-color: blue;
        color: white;


    }

    div.BranchesWidgetTabs > div.menu > .item > div {
        display: flex;
        flex-direction: column;
        padding: 0px 20px;
    }

    div.BranchesWidgetTabs > div.menu > .item:nth-child(odd) > div {
        padding-right: 0;
    }

    div.BranchesWidgetTabs > div.menu > .item > div > div {
        flex: 1;
    }
    div.BranchesWidgetTabs > div.menu > .item > div > div.i {
        background-color: darkgrey;
        min-height: 10px;
    }
    div.BranchesWidgetTabs > div.menu > .item > div > div.title {
        background-color: pink;
        padding: 10px 20px;
    }

    div.BranchesWidgetTabs > div.menu > .spacer {
        flex: 1;
    }
</style>

<script>
    export default {
        name: 'BranchesWidgetTabs',
        props : {
            items : Array,
            activeItem : {
                required : true,
                validator: function(i){
                    return typeof i === 'number' || i === null;
                }
            },
        },
        data(){
            return {

            }
        },
        computed: {
            list: function(){
                var l = [];
                var s = (this.activeItem !== null)? this.activeItem : 0;
                for(var i=0;i<this.items.length;i++){
                    var c = JSON.parse(JSON.stringify(this.items[i]));
                    if(s === i){
                        c.active = true;
                    }else{
                        c.active = false;
                    }
                    l.push(c);
                }
                return l;
            }
        },

        created(){
            console.log('created',this.activeItem);

        }
    }
</script>


积极的
{{item.title}
部门分支Widgettabs{
背景颜色：黄色；
最小高度：40px；
}
div.brancheswidgetabs>div.menu{
显示器：flex；
弯曲方向：行；
}
div.brancheswidgetabs>div.menu>.item{
flex:0自动；
最小宽度：10px；
背景颜色：蓝色；
颜色：白色；
}
div.brancheswidgetabs>div.menu>.item>div{
显示器：flex；
弯曲方向：立柱；
填充：0px 20px；
}
div.brancheswidgetabs>div.menu>。项：第n个子项（奇数）>div{
右边填充：0；
}
div.brancheswidgetabs>div.menu>.item>div>div{
弹性：1；
}
div.brancheswidgetabs>div.menu>.item>div>div.i{
背景色：暗灰色；
最小高度：10px；
}
div.brancheswidgetabs>div.menu>.item>div>div.title{
背景颜色：粉红色；
填充：10px 20px；
}
div.brancheswidgetabs>div.menu>.spacer{
弹性：1；
}
导出默认值{
名称：“BranchesWidgetTabs”，
道具：{
项目：阵列，
活动项目：{
要求：正确，
验证器：函数（i）{
返回类型i=='number'| | i===null；
}
},
},
数据（）{
返回{
}
},
计算：{
列表：函数（）{
var l=[]；
var s=（this.activeItem！==null）？this.activeItem:0；

<template>
    <div class="BranchesWidgetTabs">
        <div class="menu">
            <div class="item" v-for="(item, index) in list">
                <div>
                    <div class="i">
                        <div v-if="item.active">active</div>
                    </div>
                    <div class="title">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <div class="spacer"></div>
        </div>
        <div class="tabbody" v-for="(item, index) in list">
            <div class="content" v-if="item.active">
                <slot :name="`tabbody_${index}`"></slot>
            </div>
        </div>
    </div>
</template>

<style>
    div.BranchesWidgetTabs {

        background-color: yellow;
        min-height: 40px;
    }
    div.BranchesWidgetTabs > div.menu {
        display: flex;
        flex-direction: row;
    }
    div.BranchesWidgetTabs > div.menu > .item {
        flex: 0 0 auto;
        min-width: 10px;

        background-color: blue;
        color: white;


    }

    div.BranchesWidgetTabs > div.menu > .item > div {
        display: flex;
        flex-direction: column;
        padding: 0px 20px;
    }

    div.BranchesWidgetTabs > div.menu > .item:nth-child(odd) > div {
        padding-right: 0;
    }

    div.BranchesWidgetTabs > div.menu > .item > div > div {
        flex: 1;
    }
    div.BranchesWidgetTabs > div.menu > .item > div > div.i {
        background-color: darkgrey;
        min-height: 10px;
    }
    div.BranchesWidgetTabs > div.menu > .item > div > div.title {
        background-color: pink;
        padding: 10px 20px;
    }

    div.BranchesWidgetTabs > div.menu > .spacer {
        flex: 1;
    }
</style>

<script>
    export default {
        name: 'BranchesWidgetTabs',
        props : {
            items : Array,
            activeItem : {
                required : true,
                validator: function(i){
                    return typeof i === 'number' || i === null;
                }
            },
        },
        data(){
            return {

            }
        },
        computed: {
            list: function(){
                var l = [];
                var s = (this.activeItem !== null)? this.activeItem : 0;
                for(var i=0;i<this.items.length;i++){
                    var c = JSON.parse(JSON.stringify(this.items[i]));
                    if(s === i){
                        c.active = true;
                    }else{
                        c.active = false;
                    }
                    l.push(c);
                }
                return l;
            }
        },

        created(){
            console.log('created',this.activeItem);

        }
    }
</script>



<template>
    <div class="BranchesWidgetList">
        Liste
    </div>
</template>

<style>
    div.BranchesWidgetList {

    }
</style>

<script>
    export default {
        name: 'BranchesWidgetList',
        props : {
            items : Array
        },
        data(){
            return {

            }
        },
        computed: {

        },

        created(){
            console.log('created BranchesWidgetList',this.items);

        }
    }
</script>



<template>
    <div id="branchesWidget">

        <branches-widget-tabs :items="register" :activeItem="activeRegister">

                <template #tabbody_0 v-if="Branches.length">

                    <h1>Content Register 1</h1>

                    <branches-widget-list :items="Branches"></branches-widget-list>

                </template>

                <template #tabbody_1 v-if="Branches.length">

                    <h1>Content Register 2</h1>

                    <branches-widget-list :items="Branches"></branches-widget-list>

                </template>

        </branches-widget-tabs>

    </div>
</template>

<style>
    #branchesWidget {
        min-width: 150px;
        min-height: 150px;
        background-color: #333;
    }
    #branchesWidget:hover {
        background-color: #666;
    }

</style>

<script>
    import chroma from 'chroma-js';
    //console.log('chroma',chroma);
    import HUSL from 'hsluv';
    //console.log('HUSL',HUSL);

    import BranchesWidgetTabs from './BranchesWidgetTabs';
    import BranchesWidgetList from './BranchesWidgetList';

    const random = function(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };


    var generateColors = function(n, startHex = '#ff6000', padding = 0, step = 5, randomSat = true, randomLight = true){

        let colors = [];

        const baseHex = HUSL.hexToHsluv(startHex);
        const baseHue = baseHex[0];
        //console.log('baseHue',baseHue);

        var degrees = [];
        for (let i = 0; i < n; i++) {
            degrees.push( 360 / n * i);
        }
        //console.log('degrees',degrees);

        const hues = degrees.map((offset) => {
            return (baseHue + offset) % 360;
        });
        //console.log('hues',hues);

        if(randomSat){
            var baseSaturation = random(55, 85);
        }else{
            var baseSaturation = baseHex[1];
        }

        if(randomLight){
            var baseLightness = random(35, 75);
        }else{
            var baseLightness = baseHex[2];
        }

        var subs = Math.min(n,Math.max(step,2));

        for(let i = 0; i < subs; i++) {
            colors.push( HUSL.hsluvToHex([
              hues[i],
              baseSaturation,
              baseLightness
            ]));
        }

        console.log('colors',colors);
        return chroma.scale(colors).padding(0).mode('lab').colors(n);
    };

    export default {
        name: 'BranchesWidget',
        props : [],
        data() {
            return {
                activeRegister : null,
                register : [
                    {
                        'title' : 'tab1',
                    }
                    ,
                    {
                        'title' : 'tab2',
                    }
                ],
                rawBranches : null
            }
        },
        computed: {
            Branches : function(){
                var l = [];
                if(this.rawBranches !== null){
                    let colorArr = generateColors(this.rawBranches.length);
                    //console.log('colorArr',colorArr);

                    // Der Liste der Branchen die Farben zuordnen und als "Branches" bereitstellen
                    for(var i=0;i<this.rawBranches.length;i++){
                        var c = JSON.parse(JSON.stringify(this.rawBranches[i]));
                        c.color = colorArr[i];
                        l.push(c);
                    }

                }
                console.log('compute Branches',l);
                return l;
            }
        },
        components: {
            BranchesWidgetTabs,
            BranchesWidgetList
        },
        mounted () {
            axios
            .post('/assets/get',{ entity : 'industryBranches' })
                .then(response => ( this.rawBranches = response.data.data ))
        },
        created(){
            //console.log('created',this.rawData);
        },
        methods : {

            getBranches : function(){
                return this.Branches;
            }
        }
    }
</script>



<template>
    <div id="branchesWidget">

        <branches-widget-tabs :items="register" :activeItem="activeRegister">

                <template #tabbody_0 v-if="Branches.length">

                    <h1>Content Register 1</h1>

                    <branches-widget-list :items="Branches"></branches-widget-list>

                </template>

                <template #tabbody_1 v-if="Branches.length">

                    <h1>Content Register 2</h1>

                    <branches-widget-list :items="Branches"></branches-widget-list>

                </template>

        </branches-widget-tabs>

    </div>
</template>

<style>
    #branchesWidget {
        min-width: 150px;
        min-height: 150px;
        background-color: #333;
    }
    #branchesWidget:hover {
        background-color: #666;
    }

</style>

<script>
    import chroma from 'chroma-js';
    //console.log('chroma',chroma);
    import HUSL from 'hsluv';
    //console.log('HUSL',HUSL);

    import BranchesWidgetTabs from './BranchesWidgetTabs';
    import BranchesWidgetList from './BranchesWidgetList';

    const random = function(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };


    var generateColors = function(n, startHex = '#ff6000', padding = 0, step = 5, randomSat = true, randomLight = true){

        let colors = [];

        const baseHex = HUSL.hexToHsluv(startHex);
        const baseHue = baseHex[0];
        //console.log('baseHue',baseHue);

        var degrees = [];
        for (let i = 0; i < n; i++) {
            degrees.push( 360 / n * i);
        }
        //console.log('degrees',degrees);

        const hues = degrees.map((offset) => {
            return (baseHue + offset) % 360;
        });
        //console.log('hues',hues);

        if(randomSat){
            var baseSaturation = random(55, 85);
        }else{
            var baseSaturation = baseHex[1];
        }

        if(randomLight){
            var baseLightness = random(35, 75);
        }else{
            var baseLightness = baseHex[2];
        }

        var subs = Math.min(n,Math.max(step,2));

        for(let i = 0; i < subs; i++) {
            colors.push( HUSL.hsluvToHex([
              hues[i],
              baseSaturation,
              baseLightness
            ]));
        }

        console.log('colors',colors);
        return chroma.scale(colors).padding(0).mode('lab').colors(n);
    };

    export default {
        name: 'BranchesWidget',
        props : [],
        data() {
            return {
                activeRegister : null,
                register : [
                    {
                        'title' : 'tab1',
                    }
                    ,
                    {
                        'title' : 'tab2',
                    }
                ],
                rawBranches : null
            }
        },
        computed: {
            Branches : function(){
                var l = [];
                if(this.rawBranches !== null){
                    let colorArr = generateColors(this.rawBranches.length);
                    //console.log('colorArr',colorArr);

                    // Der Liste der Branchen die Farben zuordnen und als "Branches" bereitstellen
                    for(var i=0;i<this.rawBranches.length;i++){
                        var c = JSON.parse(JSON.stringify(this.rawBranches[i]));
                        c.color = colorArr[i];
                        l.push(c);
                    }

                }
                console.log('compute Branches',l);
                return l;
            }
        },
        components: {
            BranchesWidgetTabs,
            BranchesWidgetList
        },
        mounted () {
            axios
            .post('/assets/get',{ entity : 'industryBranches' })
                .then(response => ( this.rawBranches = response.data.data ))
        },
        created(){
            //console.log('created',this.rawData);
        },
        methods : {

            getBranches : function(){
                return this.Branches;
            }
        }
    }
</script>