Mixing
Getting item properties from a dropdown in Vue.Js
0
I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.
How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})
javascript vue.js vuejs2 vue-component v-model
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
asked Jan 2 at 11:12
GracieGracie
18519
add a comment |
0
I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.
How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})
javascript vue.js vuejs2 vue-component v-model
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
asked Jan 2 at 11:12
GracieGracie
18519
do you want to show theskuproperty and you can't?
– Boussadjra Brahim
Jan 2 at 11:57
Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box.
– Gracie
Jan 2 at 12:07
the values are unique ?
– Boussadjra Brahim
Jan 2 at 12:12
i edited my answer by adding some details that fit to your use case
– Boussadjra Brahim
Jan 2 at 12:25
add a comment |
0
0
0
I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.
How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})
javascript vue.js vuejs2 vue-component v-model
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
asked Jan 2 at 11:12
GracieGracie
18519
I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.
How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})
javascript vue.js vuejs2 vue-component v-model
javascript vue.js vuejs2 vue-component v-model
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
asked Jan 2 at 11:12
GracieGracie
18519
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
asked Jan 2 at 11:12
GracieGracie
18519
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
edited Feb 2 at 15:50
Boussadjra Brahim
8,2043733
8,2043733
asked Jan 2 at 11:12
GracieGracie
18519
asked Jan 2 at 11:12
GracieGracie
18519
asked Jan 2 at 11:12
GracieGracie
18519
18519
do you want to show theskuproperty and you can't?
– Boussadjra Brahim
Jan 2 at 11:57
Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box.
– Gracie
Jan 2 at 12:07
the values are unique ?
– Boussadjra Brahim
Jan 2 at 12:12
i edited my answer by adding some details that fit to your use case
– Boussadjra Brahim
Jan 2 at 12:25
add a comment |
do you want to show theskuproperty and you can't?
– Boussadjra Brahim
Jan 2 at 11:57
Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box.
– Gracie
Jan 2 at 12:07
the values are unique ?
– Boussadjra Brahim
Jan 2 at 12:12
i edited my answer by adding some details that fit to your use case
– Boussadjra Brahim
Jan 2 at 12:25
do you want to show the
sku property and you can't?– Boussadjra Brahim
Jan 2 at 11:57
do you want to show the
sku property and you can't?– Boussadjra Brahim
Jan 2 at 11:57
Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box.
– Gracie
Jan 2 at 12:07
Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box.
– Gracie
Jan 2 at 12:07
the values are unique ?
– Boussadjra Brahim
Jan 2 at 12:12
the values are unique ?
– Boussadjra Brahim
Jan 2 at 12:12
i edited my answer by adding some details that fit to your use case
– Boussadjra Brahim
Jan 2 at 12:25
i edited my answer by adding some details that fit to your use case
– Boussadjra Brahim
Jan 2 at 12:25
add a comment |
1 Answer
1
active
oldest
votes
3
Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>edited Jan 2 at 19:21
SirDad
525
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
1
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
you should give a default value forproductsproperty likeproducts:'A'
– Boussadjra Brahim
Jan 2 at 17:06
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
});
}
});
draft saved
draft discarded
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%2f54005284%2fgetting-item-properties-from-a-dropdown-in-vue-js%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
3
Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>edited Jan 2 at 19:21
SirDad
525
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
1
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
you should give a default value forproductsproperty likeproducts:'A'
– Boussadjra Brahim
Jan 2 at 17:06
add a comment |
3
Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>edited Jan 2 at 19:21
SirDad
525
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
1
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
you should give a default value forproductsproperty likeproducts:'A'
– Boussadjra Brahim
Jan 2 at 17:06
add a comment |
3
3
3
Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>edited Jan 2 at 19:21
SirDad
525
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>edited Jan 2 at 19:21
SirDad
525
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
edited Jan 2 at 19:21
SirDad
525
edited Jan 2 at 19:21
SirDad
525
edited Jan 2 at 19:21
SirDad
525
525
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
answered Jan 2 at 12:07
Boussadjra BrahimBoussadjra Brahim
8,2043733
8,2043733
1
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
you should give a default value forproductsproperty likeproducts:'A'
– Boussadjra Brahim
Jan 2 at 17:06
add a comment |
1
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
you should give a default value forproductsproperty likeproducts:'A'
– Boussadjra Brahim
Jan 2 at 17:06
1
1
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
You were quicker than me :) I was working on a fiddle which used the same solution: jsfiddle.net/vwszfyd7
– Frank
Jan 2 at 12:09
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
This is looking good, I'm trying to adapt this code to my personal project and it breaks. Could you help in getting this fiddle to work? whilst leaving the v-bind:value="item.id" in place jsfiddle.net/2k7m3h8a - As soon as I try and access any of the objects properties(lastprice.sku) it breaks...
– Gracie
Jan 2 at 14:17
you should give a default value for
products property like products:'A'– Boussadjra Brahim
Jan 2 at 17:06
you should give a default value for
products property like products:'A'– Boussadjra Brahim
Jan 2 at 17:06
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54005284%2fgetting-item-properties-from-a-dropdown-in-vue-js%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
do you want to show the
skuproperty and you can't?– Boussadjra Brahim
Jan 2 at 11:57
Yes, I need to show the the text property to the customer in the dropdown and a summary in the span. Plus leave the "option.value" in the v-bind so it can be passed to my backend. But I also want to display the SKU to the customer in a paragraph outside of the select box.
– Gracie
Jan 2 at 12:07
the values are unique ?
– Boussadjra Brahim
Jan 2 at 12:12
i edited my answer by adding some details that fit to your use case
– Boussadjra Brahim
Jan 2 at 12:25