Question

我目前是Vue的新手，无法将数据从api传递到Vue中的组件。

这是我的观点：

<template lang="pug">
div.mt-3
    licenses(v-show="navItem == 'Licenses'", :data="data")
    products(v-show="navItem == 'Products'")
    users(v-show="navItem == 'Users'")
    locations(v-show="navItem == 'Locations'")
</template>

<script>
import licenses from '../components/licenses.vue';
import products from '../components/products.vue';
import users from '../components/users.vue';
import locations from '../components/locations.vue';

 export default {
        components:{
            licenses,
            products,
            users,
            locations
        },

        mounted(){

            window.axios.get('/clients/1').then((response) => {
                this.data = response.data;
            });

        }
    }

我的组件：

<template lang="pug">
    .row.mt-3
        .col-sm-4(v-for="item in data.licenses")
        //.col-sm-4(v-for="item in data.licenses")
            b-card.mb-2( :header="item.product.name")
                h4.text-capitalize(slot="header") {{item.product.name}} License Usage
                p {{item.product.description}}
                div.text-center
                    .col-sm-10.offset-1
                        div.progress-number {{item.amountUsed}}/{{item.amountAllocated}}
                        b-progress(v-model="item.amountUsed", :max="item.amountAllocated", animation=true)
                            span.progress-item
                        p.text-center.mt-3 This means you have {{item.amountRemaining}} licenses left.
                .form-group.mt-1
                    label LICENSES KEY
                    input.form-control.text-center(:placeholder="item.licenseKey", readonly)


</template>
<style>

</style>
<script>
    export default{
        props:{
            data
        }
    }
</script>

是否可以使用已在v-for中传递的数据？

对不起，我的文档运气不好，请帮忙！

Answer 1

您应事先在tour data选项中初始化data属性

export default {
    data(){
        return{
            data: null
        }
    },
    components:{
        licenses,
        bproducts,
          users,
        locations
    },

    mounted(){

        window.axios.get('/clients/1').then((response) => {
            this.data = response.data;
        });

    }
}

然后，您可以在axios请求中设置值this.data = response.data

深入了解反应的declaring reactive properties。

VUE 2将数据传递给组件时出现问题

1 个答案: