如何在方法中使用 Vue 道具作为变量?

Posted

技术标签:

【中文标题】如何在方法中使用 Vue 道具作为变量?【英文标题】:How to use Vue prop as variable in method? 【发布时间】:2019-04-23 14:19:33 【问题描述】:

我对 Vue 还很陌生,很难掌握所有概念。我目前正在构建一个 Laravel 应用程序,并且正在使用 Vue 来补充一些视图。我想做的是借助 Vue 组件(Laravel Nova 卡)设置的道具对我的后端 API 进行非常简单的调用。

我有一个account_id,我可以通过这样的道具访问它:

resource.fields[3].value

然后我尝试调用 api 并保存与帐户相关的数据

data() 
    return 
        account: 
            name: '',
            location: '',
            type: ''
        
    ;
,

methods: 
    getAccount() 
        let vm = this;
        var account_id = vm.resource.fields[3].value;
        page_url = page_url || '/api/accounts/$account_id';
        fetch(page_url)
        .then(res => res.json())
        .then(res => 
            this.account = res.data;
        )
        .catch(err => console.log(err));
    

然后在我的视图中渲染:

<h1> account.name </h1>
<p> account.location </p>
<p> account.type </p>

我的所有端点都是正确的 - 当我访问 app.dev/api/accounts/id 时,我得到一个包含所有字段的 JSON 数组。但是,当我尝试渲染它时,我的视图中看不到任何数据。

我怎样才能做到这一点?

【问题讨论】:

应该 this.account = res.data; 而不是 vm.account = res.data; 来设置组件的值吗? @Peter 无关紧要,因为 OP 正在使用箭头函数 你有app.dev/api/accounts/id/api/accounts/$account_id。应该是哪一个? props 在哪里定义? 始终首先检查您的浏览器控制台是否有错误。还要检查 Network 选项卡,您应该可以在其中看到任何 AJAX 请求。你看到请求了吗?如果有,响应是什么(包括实际响应数据) @Phil 当然!谢谢。 【参考方案1】:

我认为首先你需要检查对服务器的请求,请求的 URL 是什么。

所以,我认为在这里 page_url = page_url || '/api/accounts/$account_id'; 你应该像这样使用反引号 (`) page_url = page_url || `/api/accounts/$account_id`;

如果所有这些都不适合您。我想你可以通过props传递它

data() 
    return 
        account: 
            name: '',
            location: '',
            type: ''
        
    ;
,
props: ['account_id'],
methods: 
    getAccount() 
        let vm = this;
        var account_id = vm.resource.fields[3].value;
        page_url = page_url || `/api/accounts/$this.account_id`;
        fetch(page_url)
            .then(res => res.json())
            .then(res => 
                this.account = res.data;
            )
            .catch(err => console.log(err));
    

在调用者组件中,使用 v-bind="account_id" 到 prop 到这个组件。

希望对你有帮助。

【讨论】:

啊哈,关于反引号的好消息。不错! 是的,是反引号!谢谢

以上是关于如何在方法中使用 Vue 道具作为变量?的主要内容,如果未能解决你的问题,请参考以下文章

如何在组件的方法中访问 Vue JS 道具?

如何在vue中将不同值的数组作为道具传递

如何将 Django 变量传递给 Vue 道具

如何在 Vue.js 中将对象作为道具发送和接收

如何在 Vue.js 中将实例化的 Vue 组件作为道具传递?

如何将一个道具作为变量传递给 React 中的另一个道具?