Пользовательский ввод тегов VueJS и флажок
Я работаю над функцией с использованием Laravel и VueJS, 
На фото справа вы видите две группы флажков: 1. Размер и 2. Цвет. И оставил размер текстовой области тега ввода или текстового поля. Если я установлю флажок Размер: S, он отобразится в поле ввода тега, например: size: SX, и если я выберу Цвет: Красный, он также отобразится в поле ввода тега, например: Цвет: Красный x, В то же время два разных Объект josn заполнится выбранным флажком. Например: size_object: {name: s, id: 2} И цвет: {name: Red, id: 10}
Может ли кто-нибудь сказать мне, как я могу решить эту проблему с помощью Vuejs.
Код из комментария:
<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>
Пока нет, потому что непонятно, как мне начать.
Кажется довольно простым, определите объекты для групп, начните писать html, используйте циклы v-for для каждой группы флажков ... Должно быть множество примеров, которые помогут вам начать работу в Интернете.
Вы должны попробовать реализовать его (может быть, быстрая рабочий пример), а затем вернуться с возникшими ошибками (если они у вас есть)
Здравствуйте, мне удалось выполнить первую часть этой проблемы: создать контрольный список, используя vuejs и выбранные элементы, хранящиеся в Object, где код находится ниже: 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>, но проблема в том, что не удается найти способ показать выбранные элементы в TagInputList. Может ли кто-нибудь помочь мне в этом?
Привет, @FrankProvost. Не могли бы вы помочь мне решить эту проблему?
Я думаю, вы не добавили свой полный код (я добавил ваш комментарий к вопросу, чтобы иметь форматирование), вы можете предоставить скрипт js вашего полного подхода? Вы просматриваете size_lists, но не показываете, например, свой size_list. Где и как вы хотите показать свой size_tag_list?
Ответы 1
Наконец, мне удалось решить проблему, немного изменив свой архитектурный взгляд на этот программный инструмент. Новый архитектурный вид похож на:
На этом рисунке я сохранил поле тегов ввода как теги самостоятельного ввода, т.е. Размер обуви: введенный тег заполнен, если пользователь щелкнет по этому полю, перечисленные значения появятся в виде раскрывающегося списка, а выбранное значение будет отображаться как тег ввода в этом поле. В то же время объект Json будет сгенерирован с выбранными значениями, например: shoe_size_object: {id: 2, значение: 43}. И я решил это с помощью пакета vue-multiselect, перейдя по этой ссылке: https://vue-multiselect.js.org.
Вы действительно написали какой-нибудь код?