时间戳

首页 > 解决方案 > 自定义标签输入 VueJS 和复选框

laravel - 自定义标签输入 VueJS 和复选框

问题描述

我正在使用 Laravel 和 VueJS 开发一个功能，在此处输入图像描述

在照片中，您可以在右侧看到两个复选框组：1. 大小和 2. 颜色。并离开 sizde 输入标签文本区或文本框。如果我单击复选框 Size: S 它将显示在标签输入框中，如： size:SX ，如果我选择 Color:Red ，它也会在标签输入框中显示，如： Color:Red x，同时两个不同josn 对象将填充那些选中的复选框。喜欢： size_object: { name:s, id: 2 } 和 Color: { 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>

标签： laravelvue.jsbootstrap-tags-input

解决方案

最后，我设法通过稍微改变我对这个软件工具的架构视图来解决这个问题。新的架构视图是这样的： 在此处输入图像描述

在这张图片中，我将输入标签字段保留为自我输入标签，即鞋码：输入标签归档，如果用户单击此字段，列出的值将显示为下拉列表，选定的值将显示为该字段中的输入标签也是。同时 Json 对象将生成选定的值，例如： shoe_size_object:{ id: 2, value: 43 }。我通过以下链接使用 vue-multiselect 包解决了它：https ://vue-multiselect.js.org 。

推荐阅读