How to get an object in v-model? VuetifyTrouble with Vue.js v-model within Quasar q-select tag dynamically rendering computed propertiesVuetify Select Component Initial Value issueHow to bind v-model to v-selectvue.js wrapping components which have v-modelsv-select (vuetify) cant show the seleted elementVuetify: v-model looks deprecatedVuetify - how to easily access v-select item-text value?Vuetify timepicker return value to modelVuetify v-select value not returning keyHow to get append-outer-icon working in vuetify?
Can you identify this lizard-like creature I observed in the UK?
Difference between shutdown options
Ways of geometrical multiplication
Has the laser at Magurele, Romania reached a tenth of the Sun's power?
How do I fix the group tension caused by my character stealing and possibly killing without provocation?
Given this phrasing in the lease, when should I pay my rent?
What is this high flying aircraft over Pennsylvania?
Why do Radio Buttons not fill the entire outer circle?
Pre-Employment Background Check With Consent For Future Checks
How do I Interface a PS/2 Keyboard without Modern Techniques?
Why didn't Voldemort know what Grindelwald looked like?
The Digit Triangles
Does Doodling or Improvising on the Piano Have Any Benefits?
How to get directions in deep space?
Do I have to take mana from my deck or hand when tapping a dual land?
Limit max CPU usage SQL SERVER with WSRM
Echo with obfuscation
Sound waves in different octaves
How to make a list of partial sums using forEach
Language involving irrational number is not a CFL
What should be the ideal length of sentences in a blog post for ease of reading?
Anime with legendary swords made from talismans and a man who could change them with a shattered body
Why does the Persian emissary display a string of crowned skulls?
Mimic lecturing on blackboard, facing audience
How to get an object in v-model? Vuetify
Trouble with Vue.js v-model within Quasar q-select tag dynamically rendering computed propertiesVuetify Select Component Initial Value issueHow to bind v-model to v-selectvue.js wrapping components which have v-modelsv-select (vuetify) cant show the seleted elementVuetify: v-model looks deprecatedVuetify - how to easily access v-select item-text value?Vuetify timepicker return value to modelVuetify v-select value not returning keyHow to get append-outer-icon working in vuetify?
I am using v-autocomplete to get user's input in a form.
<v-autocomplete
v-model="selected"
:items="items"
item-text="short"
item-value="long"
chips
deletable-chips/>
The structure of items is like this:
[
"long": "item-key",
"property": [
"long": "I dont need this",
"short": "this is what I need"
],
"short": "item-text"
]
and I need to access the property field of what user has selected when the key should be long. So I was wondering if there is a way that v-model holds the whole object so that I can access the property in other parts of the form? If not then what is an alternative way I could use to solve the problem?
I greatly appreciate any help
vue.js customization vuetify.js v-model v-select
asked Mar 7 at 21:58
DjShDjSh
7812
|
show 1 more comment
I am using v-autocomplete to get user's input in a form.
<v-autocomplete
v-model="selected"
:items="items"
item-text="short"
item-value="long"
chips
deletable-chips/>
The structure of items is like this:
[
"long": "item-key",
"property": [
"long": "I dont need this",
"short": "this is what I need"
],
"short": "item-text"
]
and I need to access the property field of what user has selected when the key should be long. So I was wondering if there is a way that v-model holds the whole object so that I can access the property in other parts of the form? If not then what is an alternative way I could use to solve the problem?
I greatly appreciate any help
vue.js customization vuetify.js v-model v-select
asked Mar 7 at 21:58
DjShDjSh
7812
1
You can use<v-autocomplete return-object ...and removeitem-value="long"From the docs,
– ljubadr
Mar 7 at 22:13
Thank you @ljubadr. I use it like this<div v-for="item in selected.property" >item.short </div>but there is a problem and that is when I deselect the item that was selected I would still seeitem.shorton the DOM unless I refresh. Should not that be gone since it is in thev-model?
– DjSh
Mar 10 at 20:19
1
When you clear selection,this.selectedwill benull, and yourv-for="item in selected.property"will throw error. You need to wrap that in<template v-if="selected"> <div v-for="....">... </div></template>
– ljubadr
Mar 10 at 21:28
You should probably create computed property:getSelectedPropertyShort() return this.selected ? this.selected.property[0].short : ''. Not sure which values you will have in yourpropertyarray, but this only works if long/short are first values in the array. And if you have more complex logic, it's easy to add it in this computed property
– ljubadr
Mar 10 at 21:36
@ljubadrv-ifworked. Do I still need the computed property?
– DjSh
Mar 10 at 21:42
|
show 1 more comment
I am using v-autocomplete to get user's input in a form.
<v-autocomplete
v-model="selected"
:items="items"
item-text="short"
item-value="long"
chips
deletable-chips/>
The structure of items is like this:
[
"long": "item-key",
"property": [
"long": "I dont need this",
"short": "this is what I need"
],
"short": "item-text"
]
and I need to access the property field of what user has selected when the key should be long. So I was wondering if there is a way that v-model holds the whole object so that I can access the property in other parts of the form? If not then what is an alternative way I could use to solve the problem?
I greatly appreciate any help
vue.js customization vuetify.js v-model v-select
asked Mar 7 at 21:58
DjShDjSh
7812
I am using v-autocomplete to get user's input in a form.
<v-autocomplete
v-model="selected"
:items="items"
item-text="short"
item-value="long"
chips
deletable-chips/>
The structure of items is like this:
[
"long": "item-key",
"property": [
"long": "I dont need this",
"short": "this is what I need"
],
"short": "item-text"
]
and I need to access the property field of what user has selected when the key should be long. So I was wondering if there is a way that v-model holds the whole object so that I can access the property in other parts of the form? If not then what is an alternative way I could use to solve the problem?
I greatly appreciate any help
vue.js customization vuetify.js v-model v-select
vue.js customization vuetify.js v-model v-select
asked Mar 7 at 21:58
DjShDjSh
7812
asked Mar 7 at 21:58
DjShDjSh
7812
edited Mar 10 at 20:41
DjSh
asked Mar 7 at 21:58
DjShDjSh
7812
asked Mar 7 at 21:58
DjShDjSh
7812
asked Mar 7 at 21:58
DjShDjSh
7812
7812
1
You can use<v-autocomplete return-object ...and removeitem-value="long"From the docs,
– ljubadr
Mar 7 at 22:13
Thank you @ljubadr. I use it like this<div v-for="item in selected.property" >item.short </div>but there is a problem and that is when I deselect the item that was selected I would still seeitem.shorton the DOM unless I refresh. Should not that be gone since it is in thev-model?
– DjSh
Mar 10 at 20:19
1
When you clear selection,this.selectedwill benull, and yourv-for="item in selected.property"will throw error. You need to wrap that in<template v-if="selected"> <div v-for="....">... </div></template>
– ljubadr
Mar 10 at 21:28
You should probably create computed property:getSelectedPropertyShort() return this.selected ? this.selected.property[0].short : ''. Not sure which values you will have in yourpropertyarray, but this only works if long/short are first values in the array. And if you have more complex logic, it's easy to add it in this computed property
– ljubadr
Mar 10 at 21:36
@ljubadrv-ifworked. Do I still need the computed property?
– DjSh
Mar 10 at 21:42
|
show 1 more comment
1
You can use<v-autocomplete return-object ...and removeitem-value="long"From the docs,
– ljubadr
Mar 7 at 22:13
Thank you @ljubadr. I use it like this<div v-for="item in selected.property" >item.short </div>but there is a problem and that is when I deselect the item that was selected I would still seeitem.shorton the DOM unless I refresh. Should not that be gone since it is in thev-model?
– DjSh
Mar 10 at 20:19
1
When you clear selection,this.selectedwill benull, and yourv-for="item in selected.property"will throw error. You need to wrap that in<template v-if="selected"> <div v-for="....">... </div></template>
– ljubadr
Mar 10 at 21:28
You should probably create computed property:getSelectedPropertyShort() return this.selected ? this.selected.property[0].short : ''. Not sure which values you will have in yourpropertyarray, but this only works if long/short are first values in the array. And if you have more complex logic, it's easy to add it in this computed property
– ljubadr
Mar 10 at 21:36
@ljubadrv-ifworked. Do I still need the computed property?
– DjSh
Mar 10 at 21:42
1
1
You can use
<v-autocomplete return-object ... and remove item-value="long" From the docs,– ljubadr
Mar 7 at 22:13
You can use
<v-autocomplete return-object ... and remove item-value="long" From the docs,– ljubadr
Mar 7 at 22:13
Thank you @ljubadr. I use it like this
<div v-for="item in selected.property" >item.short </div> but there is a problem and that is when I deselect the item that was selected I would still see item.short on the DOM unless I refresh. Should not that be gone since it is in the v-model?– DjSh
Mar 10 at 20:19
Thank you @ljubadr. I use it like this
<div v-for="item in selected.property" >item.short </div> but there is a problem and that is when I deselect the item that was selected I would still see item.short on the DOM unless I refresh. Should not that be gone since it is in the v-model?– DjSh
Mar 10 at 20:19
1
1
When you clear selection,
this.selected will be null, and your v-for="item in selected.property" will throw error. You need to wrap that in <template v-if="selected"> <div v-for="....">... </div></template>– ljubadr
Mar 10 at 21:28
When you clear selection,
this.selected will be null, and your v-for="item in selected.property" will throw error. You need to wrap that in <template v-if="selected"> <div v-for="....">... </div></template>– ljubadr
Mar 10 at 21:28
You should probably create computed property:
getSelectedPropertyShort() return this.selected ? this.selected.property[0].short : ''. Not sure which values you will have in your property array, but this only works if long/short are first values in the array. And if you have more complex logic, it's easy to add it in this computed property– ljubadr
Mar 10 at 21:36
You should probably create computed property:
getSelectedPropertyShort() return this.selected ? this.selected.property[0].short : ''. Not sure which values you will have in your property array, but this only works if long/short are first values in the array. And if you have more complex logic, it's easy to add it in this computed property– ljubadr
Mar 10 at 21:36
@ljubadr
v-if worked. Do I still need the computed property?– DjSh
Mar 10 at 21:42
@ljubadr
v-if worked. Do I still need the computed property?– DjSh
Mar 10 at 21:42
|
show 1 more comment
1 Answer
1
active
oldest
votes
No, that would go against the core concept of Vue its self.
Instead, let's use a getter:
get selectedItemObject()
return this.items.filter(obj => obj.property[0].long === this.selected)
Psueo code here, make sure to make it type and selector safe.
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
I might have not been very clear on my question but I dont need theproperty[0].longand the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key
– DjSh
Mar 10 at 20:45
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%2f55053457%2fhow-to-get-an-object-in-v-model-vuetify%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
No, that would go against the core concept of Vue its self.
Instead, let's use a getter:
get selectedItemObject()
return this.items.filter(obj => obj.property[0].long === this.selected)
Psueo code here, make sure to make it type and selector safe.
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
I might have not been very clear on my question but I dont need theproperty[0].longand the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key
– DjSh
Mar 10 at 20:45
add a comment |
No, that would go against the core concept of Vue its self.
Instead, let's use a getter:
get selectedItemObject()
return this.items.filter(obj => obj.property[0].long === this.selected)
Psueo code here, make sure to make it type and selector safe.
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
I might have not been very clear on my question but I dont need theproperty[0].longand the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key
– DjSh
Mar 10 at 20:45
add a comment |
No, that would go against the core concept of Vue its self.
Instead, let's use a getter:
get selectedItemObject()
return this.items.filter(obj => obj.property[0].long === this.selected)
Psueo code here, make sure to make it type and selector safe.
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
No, that would go against the core concept of Vue its self.
Instead, let's use a getter:
get selectedItemObject()
return this.items.filter(obj => obj.property[0].long === this.selected)
Psueo code here, make sure to make it type and selector safe.
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
answered Mar 7 at 22:09
OhgodwhyOhgodwhy
35.1k63969
35.1k63969
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
I might have not been very clear on my question but I dont need theproperty[0].longand the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key
– DjSh
Mar 10 at 20:45
add a comment |
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
I might have not been very clear on my question but I dont need theproperty[0].longand the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key
– DjSh
Mar 10 at 20:45
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
Thank you very much for your help. I have never seen using a getter before in Vue. Where would I put it? in methods or computed property?
– DjSh
Mar 10 at 19:35
I might have not been very clear on my question but I dont need the
property[0].long and the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key– DjSh
Mar 10 at 20:45
I might have not been very clear on my question but I dont need the
property[0].long and the items array could be very long. This is just the structure. Sorry for any confusion on my part. I have updated my question to show which one is the key– DjSh
Mar 10 at 20:45
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%2f55053457%2fhow-to-get-an-object-in-v-model-vuetify%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
1
You can use
<v-autocomplete return-object ...and removeitem-value="long"From the docs,– ljubadr
Mar 7 at 22:13
Thank you @ljubadr. I use it like this
<div v-for="item in selected.property" >item.short </div>but there is a problem and that is when I deselect the item that was selected I would still seeitem.shorton the DOM unless I refresh. Should not that be gone since it is in thev-model?– DjSh
Mar 10 at 20:19
1
When you clear selection,
this.selectedwill benull, and yourv-for="item in selected.property"will throw error. You need to wrap that in<template v-if="selected"> <div v-for="....">... </div></template>– ljubadr
Mar 10 at 21:28
You should probably create computed property:
getSelectedPropertyShort() return this.selected ? this.selected.property[0].short : ''. Not sure which values you will have in yourpropertyarray, but this only works if long/short are first values in the array. And if you have more complex logic, it's easy to add it in this computed property– ljubadr
Mar 10 at 21:36
@ljubadr
v-ifworked. Do I still need the computed property?– DjSh
Mar 10 at 21:42