CODEWITHSUNDEEP
laravelvue.jsbootstrap-tags-input
leaveme_alone
leaveme_alone

Reputation: 686

Custom Tag Input VueJS and Checkbox

I'm working on a feature using Laravel and VueJS, enter image description here

In photo you can see in right hand side there have two checkbox group: 1. Size and 2. Color. And left sizde Input Tag Text Area or Text Box. If I click on checkbox Size: S it will show in tag input box like: size:S X , and if I select Color:Red , it will also show in Tag input box like: Color:Red x,At the same time two different josn object will fill with those selected checkbox. Like: size_object: { name:s, id: 2 } And Color: { name:Red, id: 10 }

Can any one please tell me how can I solve this using Vuejs.

Code from comment:

<div v-for="size in size_lists"> 
  <input type="checkbox" 
         v-model="size_tag_lists" 
        :id="size.id" 
        :value="size.id" 
        class="attributes-checkbox" />

  {{size.name}} 
</div> 

<script> 
  data(){ return{ size_tag_lists: [] } } 
</script>

Upvotes: 0

Views: 548

Answers (1)

leaveme_alone
leaveme_alone

Reputation: 686

Finally I managed to solve the issue by changing little bit of my architectural view of this software tools. New architectural view is like: enter image description here

In this picture I kept input tags field as a self input tags, i.e Shoe Size: Input Tag Filed, if user click on this field listed values will appear as a drop-down list and selected one will show as a input tag in this field as well. At the same time Json object will generate with selected values like: shoe_size_object:{ id: 2, value: 43 }. And I solved it using vue-multiselect package by following this link: https://vue-multiselect.js.org.

Upvotes: 1

Related Questions