Add dynamic dropdown on button click and getting the dropdown valuesTrigger a button click with JavaScript on the Enter key in a text boxHow can I get query string values in JavaScript?How to get the value from the GET parameters?Get selected value in dropdown list using JavaScriptHow can I add a key/value pair to a JavaScript object?Is it possible to add dynamically named properties to JavaScript object?Get all unique values in a JavaScript array (remove duplicates)jQuery Get Selected Option From DropdownHow to set default option for dynamic drop down buttons in jQuery?How to set value in session storage with vueJS by ajax dropdown select to other changes value
Is multiplication of real numbers uniquely defined as being distributive over addition?
Does this smartphone photo show Mars just below the Sun?
Unexpected route on a flight from USA to Europe
Where is the rule for moving slowly when searching for traps that’s referenced by Dungeon Delver?
How quickly could a country build a tall concrete wall around a city?
Should I self-publish my novella on Amazon or try my luck getting publishers?
How does The Fools Guild make its money?
Does the Voyager team use a wrapper (Fortran(77?) to Python) to transmit current commands?
Secure my password from unsafe servers
WordCloud: do not eliminate duplicates
Looking for a new job because of relocation - is it okay to tell the real reason?
Why does the ultra long-end of a yield curve invert?
How to draw a flow chart?
Why do private jets such as Gulfstream fly higher than other civilian jets?
Ampacity of Conductive Tape
How do I get the =LEFT function in excel, to also take the number zero as the first number?
Scripting a Maintenance Plan in SQL Server Express
Does the length of a password for Wi-Fi affect speed?
Is there a loss of quality when converting RGB to HEX?
How can I tell if a flight itinerary is fake
Erratic behavior by an internal employee against an external employee
What can make Linux unresponsive for minutes when browsing certain websites?
What does Fisher mean by this quote?
Can ads on a page read my password?
Add dynamic dropdown on button click and getting the dropdown values
Trigger a button click with JavaScript on the Enter key in a text boxHow can I get query string values in JavaScript?How to get the value from the GET parameters?Get selected value in dropdown list using JavaScriptHow can I add a key/value pair to a JavaScript object?Is it possible to add dynamically named properties to JavaScript object?Get all unique values in a JavaScript array (remove duplicates)jQuery Get Selected Option From DropdownHow to set default option for dynamic drop down buttons in jQuery?How to set value in session storage with vueJS by ajax dropdown select to other changes value
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have added html select options dynamically while clicking on button
<div id="app">
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
<button @click="showValues">
Show values
</button>
</div>
<div v-for="row in rows" :id=row.id>
<button-counter></button-counter>
</div>
</div>
<script>
Vue.component('button-counter',
props: ['value'],
template: '<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>'
)
var app = new Vue(
el: "#app",
data:
rows: [],
values: ,
count: 0,
selected: ''
,
methods:
addRow: function ()
var txtCount = ++this.count;
id = 'ddl_' + txtCount;
this.rows.push( title: "first", description: "ddl1", id );
,
showValues()
console.log(this.values)
);
</script>
I am using component for adding html select dynamically.when i click on Add row button, new drop down will add. My problem is i want to get drop down values on Show values button click.
javascript vue.js vuejs2 vue-component
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
add a comment |
I have added html select options dynamically while clicking on button
<div id="app">
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
<button @click="showValues">
Show values
</button>
</div>
<div v-for="row in rows" :id=row.id>
<button-counter></button-counter>
</div>
</div>
<script>
Vue.component('button-counter',
props: ['value'],
template: '<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>'
)
var app = new Vue(
el: "#app",
data:
rows: [],
values: ,
count: 0,
selected: ''
,
methods:
addRow: function ()
var txtCount = ++this.count;
id = 'ddl_' + txtCount;
this.rows.push( title: "first", description: "ddl1", id );
,
showValues()
console.log(this.values)
);
</script>
I am using component for adding html select dynamically.when i click on Add row button, new drop down will add. My problem is i want to get drop down values on Show values button click.
javascript vue.js vuejs2 vue-component
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
add a comment |
I have added html select options dynamically while clicking on button
<div id="app">
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
<button @click="showValues">
Show values
</button>
</div>
<div v-for="row in rows" :id=row.id>
<button-counter></button-counter>
</div>
</div>
<script>
Vue.component('button-counter',
props: ['value'],
template: '<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>'
)
var app = new Vue(
el: "#app",
data:
rows: [],
values: ,
count: 0,
selected: ''
,
methods:
addRow: function ()
var txtCount = ++this.count;
id = 'ddl_' + txtCount;
this.rows.push( title: "first", description: "ddl1", id );
,
showValues()
console.log(this.values)
);
</script>
I am using component for adding html select dynamically.when i click on Add row button, new drop down will add. My problem is i want to get drop down values on Show values button click.
javascript vue.js vuejs2 vue-component
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
I have added html select options dynamically while clicking on button
<div id="app">
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
<button @click="showValues">
Show values
</button>
</div>
<div v-for="row in rows" :id=row.id>
<button-counter></button-counter>
</div>
</div>
<script>
Vue.component('button-counter',
props: ['value'],
template: '<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>'
)
var app = new Vue(
el: "#app",
data:
rows: [],
values: ,
count: 0,
selected: ''
,
methods:
addRow: function ()
var txtCount = ++this.count;
id = 'ddl_' + txtCount;
this.rows.push( title: "first", description: "ddl1", id );
,
showValues()
console.log(this.values)
);
</script>
I am using component for adding html select dynamically.when i click on Add row button, new drop down will add. My problem is i want to get drop down values on Show values button click.
javascript vue.js vuejs2 vue-component
javascript vue.js vuejs2 vue-component
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
edited Mar 28 at 8:59
Basil Joy
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
asked Mar 27 at 5:50
Basil JoyBasil Joy
461 gold badge4 silver badges13 bronze badges
461 gold badge4 silver badges13 bronze badges
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
For accessing value what you can do is add ref to all components and get the value of the v-model using the $ref but for that, you need to add the v-model to the select component. I have created the plunker with your code and its working fine. For more detail please refer the codepen.
codepen - https://codepen.io/anon/pen/Qoeybv
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
add a comment |
I see that you have one "Show values button click", but can exist many select HTML elements. Have to decide which element you want to get. If you want to get all it can be done in this.$children as array of objects. See this [enter link description here][1]. I'm new at vue.js and I do not claim to be a good practice / solution. There is added event on each select (for example) and show last select element in showValues().
[1]: https://codepen.io/iganchev87/pen/xBvOMJ
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
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%2f55370593%2fadd-dynamic-dropdown-on-button-click-and-getting-the-dropdown-values%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
For accessing value what you can do is add ref to all components and get the value of the v-model using the $ref but for that, you need to add the v-model to the select component. I have created the plunker with your code and its working fine. For more detail please refer the codepen.
codepen - https://codepen.io/anon/pen/Qoeybv
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
add a comment |
For accessing value what you can do is add ref to all components and get the value of the v-model using the $ref but for that, you need to add the v-model to the select component. I have created the plunker with your code and its working fine. For more detail please refer the codepen.
codepen - https://codepen.io/anon/pen/Qoeybv
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
add a comment |
For accessing value what you can do is add ref to all components and get the value of the v-model using the $ref but for that, you need to add the v-model to the select component. I have created the plunker with your code and its working fine. For more detail please refer the codepen.
codepen - https://codepen.io/anon/pen/Qoeybv
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
For accessing value what you can do is add ref to all components and get the value of the v-model using the $ref but for that, you need to add the v-model to the select component. I have created the plunker with your code and its working fine. For more detail please refer the codepen.
codepen - https://codepen.io/anon/pen/Qoeybv
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
answered Mar 28 at 16:19
Patel PratikPatel Pratik
7262 silver badges12 bronze badges
7262 silver badges12 bronze badges
add a comment |
add a comment |
I see that you have one "Show values button click", but can exist many select HTML elements. Have to decide which element you want to get. If you want to get all it can be done in this.$children as array of objects. See this [enter link description here][1]. I'm new at vue.js and I do not claim to be a good practice / solution. There is added event on each select (for example) and show last select element in showValues().
[1]: https://codepen.io/iganchev87/pen/xBvOMJ
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
add a comment |
I see that you have one "Show values button click", but can exist many select HTML elements. Have to decide which element you want to get. If you want to get all it can be done in this.$children as array of objects. See this [enter link description here][1]. I'm new at vue.js and I do not claim to be a good practice / solution. There is added event on each select (for example) and show last select element in showValues().
[1]: https://codepen.io/iganchev87/pen/xBvOMJ
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
add a comment |
I see that you have one "Show values button click", but can exist many select HTML elements. Have to decide which element you want to get. If you want to get all it can be done in this.$children as array of objects. See this [enter link description here][1]. I'm new at vue.js and I do not claim to be a good practice / solution. There is added event on each select (for example) and show last select element in showValues().
[1]: https://codepen.io/iganchev87/pen/xBvOMJ
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
I see that you have one "Show values button click", but can exist many select HTML elements. Have to decide which element you want to get. If you want to get all it can be done in this.$children as array of objects. See this [enter link description here][1]. I'm new at vue.js and I do not claim to be a good practice / solution. There is added event on each select (for example) and show last select element in showValues().
[1]: https://codepen.io/iganchev87/pen/xBvOMJ
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
answered Mar 28 at 17:58
Ivan GanchevIvan Ganchev
791 silver badge7 bronze badges
791 silver badge7 bronze badges
add a comment |
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%2f55370593%2fadd-dynamic-dropdown-on-button-click-and-getting-the-dropdown-values%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
