Custom Tag Input VueJS and Checkbox

Question

I'm working on a feature using Laravel and VueJS,

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>

Seems fairly simple, define the objects for the groups, start writing the html, use v-for loops for each checkbox group... There should be plenty of examples to help you get started online. — Devon Bessemer
– Devon Bessemer, Commented Aug 8, 2018 at 11:07
You should give it a try to implement it (maybe a quick fiddle) and then come back with the occuring errors (if you have any) — Frnak
– Frnak, Commented Aug 8, 2018 at 12:22
Hello, I managed to do first part of this problem: Generate checklist using vuejs and selected items stored in Object where code is below: HTML: <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> but problem is can't find the way to show selected items in TagInputList. Can anyone please help me to do that? — leaveme_alone
– leaveme_alone, Commented Aug 13, 2018 at 8:46

leaveme_alone · Accepted Answer · 2018-09-01 06:42:32Z

1

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

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.

answered Sep 1, 2018 at 6:42

leaveme_alone

6862 gold badges8 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom Tag Input VueJS and Checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related