如何在方法中使用 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 道具作为变量?的主要内容,如果未能解决你的问题,请参考以下文章