I have a page with different categories and for each category, I can add a subcategory by toggling an input field and adding text. If i toggled the input field for two or more categories and i click at one of the input fields and start adding text - the text i enter is showing in all the toggled input fields. How can i limit so that what i enter as text is just limited to the category i am typing in?
Example:
h5 Topics
button.btn.btn-outline-primary.px-5(@click='toggleAdd('addTopics',ref='addTopics') Add
#addTopics.collapse
input.form-control(type='text', aria-label='Add Topic', v-model='fieldValue', @blur='addInformation("addTopics")', v-on:keyup.enter='$event.target.blur()', ref='topic')
h5 News
button.btn.btn-outline-primary.px-5(@click='toggleAdd('addNews',ref='addNews') Add
#addNews.collapse
input.form-control(type='text', aria-label='Add News', v-model='fieldValue', @blur='addInformation("addNews")', v-on:keyup.enter='$event.target.blur()', ref='news')
h5 Stories
button.btn.btn-outline-primary.px-5(@click='toggleAdd('addStories',ref='addStories') Add
#addStories.collapse
input.form-control(type='text', aria-label='Add Stories', v-model='fieldValue', @blur='addInformation("addStories")', v-on:keyup.enter='$event.target.blur()', ref='stories')
If I toggled all three inputs and then I clicked in the topics input and started typing ... the text i am entering is also appearing in the other two input fields. I know it is probably because i have the same v-model for all of them but that is something intentional. Is it possible to restrict the text entry to an input field by the input id?