在组件中声明动态数据，Vuejs 2

Posted 2023-02-23

【中文标题】在组件中声明动态数据，Vuejs 2

【英文标题】：Declaring dynamic data in a component, Vuejs 2

【发布时间】：2017-02-24 00:49:46

【问题描述】：

我现在从 vue js 2 开始。我有这段代码，它从服务器（laravel 5.3 应用程序）接收动态数据，问题是当我尝试在组件上声明用户数组而不是在Vue() 实例（在这种情况下效果很好）：

html：

<div id="app">
    <my-component>
        <ul id="users-list">
            <li v-for="user in users">user.name</li>
        </ul>
    </my-component>
</div>

JS：

Vue.component('my-component', 
    template: '#users-list',
    data: function () 
        return 
            users: []
        
    ,
    mounted: function() 
        this.$http.get('http://127.0.0.1:8003/api/test').then((response) => 
            console.log(response.body);
            this.users = response.body;
        , function() 
            alert('brrh');
        );
    
);
new Vue(
    el: '#app',
);

错误信息：“Uncaught ReferenceError: users is not defined”

【参考方案1】：

看起来您正在尝试执行 inline-template 尝试将该指令添加到您的 <my-component> 调用中。

    <div id="app">
            <my-component inline-template>
                    <ul id="users-list">
                            <li v-for="user in users">user.name</li>
                    </ul>
            </my-component>
    </div>

您还必须从组件调用中删除模板参数

    Vue.component('my-component', 
        data: function () 
            return 
                users: []
            
        ,
        mounted: function() 
            this.$http.get('http://127.0.0.1:8003/api/test').then((response) => 
                console.log(response.body);
                this.users = response.body;
            , function() 
                alert('brrh');
            );
        
    );

    new Vue(
            el: '#app',
    );

jsFiddle