[Vuejs]-Render dynamic text-box from input and drop-down list in html, js

by

0👍

I am not sure what you’re trying to accomplish. From my understanding, you want the user to select a table (1 or 2), then write a value inside the input, then click ‘Add’, so that, in the end, the value is added to the Option 1 or Option 2 table.

If so, here are some ways you could achieve what you want:

Your values for Option 1 & Option 2 could be stored in two different mutable Ref() objects. Like so:

const valuesOption1 = ref([]);
const valuesOption2 = ref([]);

I don’t how your template is organized right now, so I will just say… You could use v-for in your template to loop through each array and render the values.

Whenever the user selects an Option (1 or 2), adds a new value in the input, and clicks ‘Add’, you could push the new value in the selected option array. In pseudo-code:

when OnClick();
if (selectedOption === 1)
valuesOption1.value.push(input.value)
else if (selectedOption === 2)
valuesOption2.value.push(input.value)

Since ref() is reactive, whenever its value changes, it will dynamically update in the template.

Again, this is just a really basic start, I’m not sure how much I can help you, since I don’t really understand what you need. But let me know if you try anything and if you’re stuck at any point. And it usually helps when you add code and screenshots to your questions!

Leave a comment