How to use Vue prop as variable in method?
I'm fairly new to Vue and am having a tough time grasping all of the concepts. I am currently building a Laravel application and am using Vue to supplement some views. What I am trying to do is a pretty simple call to my backend API with the help of a prop set up with the Vue component (Laravel Nova card).
I have an account_id that I am able to access through a prop like so:
resource.fields[3].value
I am then trying to make a call to the api and save data relevant to the account
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));
}
}
And then render it in my view:
<h1>{{ account.name }}</h1>
<p>{{ account.location }}</p>
<p>{{ account.type }}</p>
All of my endpoints are correct - when I visit app.dev/api/accounts/{id} I get a JSON array with all of my fields. But, I see no data in my views when I try to render it.
How can I accomplish this?
javascript laravel vue.js laravel-nova
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
add a comment |
I'm fairly new to Vue and am having a tough time grasping all of the concepts. I am currently building a Laravel application and am using Vue to supplement some views. What I am trying to do is a pretty simple call to my backend API with the help of a prop set up with the Vue component (Laravel Nova card).
I have an account_id that I am able to access through a prop like so:
resource.fields[3].value
I am then trying to make a call to the api and save data relevant to the account
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));
}
}
And then render it in my view:
<h1>{{ account.name }}</h1>
<p>{{ account.location }}</p>
<p>{{ account.type }}</p>
All of my endpoints are correct - when I visit app.dev/api/accounts/{id} I get a JSON array with all of my fields. But, I see no data in my views when I try to render it.
How can I accomplish this?
javascript laravel vue.js laravel-nova
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
Shouldthis.account = res.data;instead bevm.account = res.data;to set the value on your component?
– Peter
Nov 21 '18 at 3:34
@Peter shouldn't matter since OP is using arrow functions
– Phil
Nov 21 '18 at 3:39
You haveapp.dev/api/accounts/{id}and/api/accounts/${account_id}. which one should it be? Also where is thepropsdefined?
– Psidom
Nov 21 '18 at 3:39
Always check your browser console first for errors. Also check the Network tab where you should be able to see any AJAX requests. Do you see the request being made? If so, what is the response (including the actual response data)
– Phil
Nov 21 '18 at 3:43
@Phil Of course! Thanks.
– Peter
Nov 21 '18 at 4:16
add a comment |
I'm fairly new to Vue and am having a tough time grasping all of the concepts. I am currently building a Laravel application and am using Vue to supplement some views. What I am trying to do is a pretty simple call to my backend API with the help of a prop set up with the Vue component (Laravel Nova card).
I have an account_id that I am able to access through a prop like so:
resource.fields[3].value
I am then trying to make a call to the api and save data relevant to the account
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));
}
}
And then render it in my view:
<h1>{{ account.name }}</h1>
<p>{{ account.location }}</p>
<p>{{ account.type }}</p>
All of my endpoints are correct - when I visit app.dev/api/accounts/{id} I get a JSON array with all of my fields. But, I see no data in my views when I try to render it.
How can I accomplish this?
javascript laravel vue.js laravel-nova
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
I'm fairly new to Vue and am having a tough time grasping all of the concepts. I am currently building a Laravel application and am using Vue to supplement some views. What I am trying to do is a pretty simple call to my backend API with the help of a prop set up with the Vue component (Laravel Nova card).
I have an account_id that I am able to access through a prop like so:
resource.fields[3].value
I am then trying to make a call to the api and save data relevant to the account
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));
}
}
And then render it in my view:
<h1>{{ account.name }}</h1>
<p>{{ account.location }}</p>
<p>{{ account.type }}</p>
All of my endpoints are correct - when I visit app.dev/api/accounts/{id} I get a JSON array with all of my fields. But, I see no data in my views when I try to render it.
How can I accomplish this?
javascript laravel vue.js laravel-nova
javascript laravel vue.js laravel-nova
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
asked Nov 21 '18 at 3:28
hoolakoolahoolakoola
301215
301215
Shouldthis.account = res.data;instead bevm.account = res.data;to set the value on your component?
– Peter
Nov 21 '18 at 3:34
@Peter shouldn't matter since OP is using arrow functions
– Phil
Nov 21 '18 at 3:39
You haveapp.dev/api/accounts/{id}and/api/accounts/${account_id}. which one should it be? Also where is thepropsdefined?
– Psidom
Nov 21 '18 at 3:39
Always check your browser console first for errors. Also check the Network tab where you should be able to see any AJAX requests. Do you see the request being made? If so, what is the response (including the actual response data)
– Phil
Nov 21 '18 at 3:43
@Phil Of course! Thanks.
– Peter
Nov 21 '18 at 4:16
add a comment |
Shouldthis.account = res.data;instead bevm.account = res.data;to set the value on your component?
– Peter
Nov 21 '18 at 3:34
@Peter shouldn't matter since OP is using arrow functions
– Phil
Nov 21 '18 at 3:39
You haveapp.dev/api/accounts/{id}and/api/accounts/${account_id}. which one should it be? Also where is thepropsdefined?
– Psidom
Nov 21 '18 at 3:39
Always check your browser console first for errors. Also check the Network tab where you should be able to see any AJAX requests. Do you see the request being made? If so, what is the response (including the actual response data)
– Phil
Nov 21 '18 at 3:43
@Phil Of course! Thanks.
– Peter
Nov 21 '18 at 4:16
Should
this.account = res.data; instead be vm.account = res.data; to set the value on your component?– Peter
Nov 21 '18 at 3:34
Should
this.account = res.data; instead be vm.account = res.data; to set the value on your component?– Peter
Nov 21 '18 at 3:34
@Peter shouldn't matter since OP is using arrow functions
– Phil
Nov 21 '18 at 3:39
@Peter shouldn't matter since OP is using arrow functions
– Phil
Nov 21 '18 at 3:39
You have
app.dev/api/accounts/{id} and /api/accounts/${account_id}. which one should it be? Also where is the props defined?– Psidom
Nov 21 '18 at 3:39
You have
app.dev/api/accounts/{id} and /api/accounts/${account_id}. which one should it be? Also where is the props defined?– Psidom
Nov 21 '18 at 3:39
Always check your browser console first for errors. Also check the Network tab where you should be able to see any AJAX requests. Do you see the request being made? If so, what is the response (including the actual response data)
– Phil
Nov 21 '18 at 3:43
Always check your browser console first for errors. Also check the Network tab where you should be able to see any AJAX requests. Do you see the request being made? If so, what is the response (including the actual response data)
– Phil
Nov 21 '18 at 3:43
@Phil Of course! Thanks.
– Peter
Nov 21 '18 at 4:16
@Phil Of course! Thanks.
– Peter
Nov 21 '18 at 4:16
add a comment |
1 Answer
1
active
oldest
votes
I think the first you need to check the request to the server what is the URL has been requested.
So, I think in here page_url = page_url || '/api/accounts/${account_id}'; you should using the backticks (`) like this page_url = page_url || `/api/accounts/${account_id}`;
If all of these not working for you. I think you can pass it via 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));
}
}
In the caller component, using v-bind="account_id" to prop to this component.
Hope it helps you.
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404856%2fhow-to-use-vue-prop-as-variable-in-method%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think the first you need to check the request to the server what is the URL has been requested.
So, I think in here page_url = page_url || '/api/accounts/${account_id}'; you should using the backticks (`) like this page_url = page_url || `/api/accounts/${account_id}`;
If all of these not working for you. I think you can pass it via 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));
}
}
In the caller component, using v-bind="account_id" to prop to this component.
Hope it helps you.
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
add a comment |
I think the first you need to check the request to the server what is the URL has been requested.
So, I think in here page_url = page_url || '/api/accounts/${account_id}'; you should using the backticks (`) like this page_url = page_url || `/api/accounts/${account_id}`;
If all of these not working for you. I think you can pass it via 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));
}
}
In the caller component, using v-bind="account_id" to prop to this component.
Hope it helps you.
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
add a comment |
I think the first you need to check the request to the server what is the URL has been requested.
So, I think in here page_url = page_url || '/api/accounts/${account_id}'; you should using the backticks (`) like this page_url = page_url || `/api/accounts/${account_id}`;
If all of these not working for you. I think you can pass it via 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));
}
}
In the caller component, using v-bind="account_id" to prop to this component.
Hope it helps you.
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
I think the first you need to check the request to the server what is the URL has been requested.
So, I think in here page_url = page_url || '/api/accounts/${account_id}'; you should using the backticks (`) like this page_url = page_url || `/api/accounts/${account_id}`;
If all of these not working for you. I think you can pass it via 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));
}
}
In the caller component, using v-bind="account_id" to prop to this component.
Hope it helps you.
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
answered Nov 21 '18 at 3:50
ThangLeThangLe
1418
1418
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
add a comment |
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Aha, great catch about the backticks. Nice!
– Phil
Nov 21 '18 at 4:02
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
Yes, it was the backticks! Thank you
– hoolakoola
Nov 21 '18 at 4:42
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404856%2fhow-to-use-vue-prop-as-variable-in-method%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Should
this.account = res.data;instead bevm.account = res.data;to set the value on your component?– Peter
Nov 21 '18 at 3:34
@Peter shouldn't matter since OP is using arrow functions
– Phil
Nov 21 '18 at 3:39
You have
app.dev/api/accounts/{id}and/api/accounts/${account_id}. which one should it be? Also where is thepropsdefined?– Psidom
Nov 21 '18 at 3:39
Always check your browser console first for errors. Also check the Network tab where you should be able to see any AJAX requests. Do you see the request being made? If so, what is the response (including the actual response data)
– Phil
Nov 21 '18 at 3:43
@Phil Of course! Thanks.
– Peter
Nov 21 '18 at 4:16