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

Question

我正在使用Laravel和VueJS开发一种功能，

在照片中，您可以在右侧看到两个复选框组：1.尺寸和2.颜色。和左侧sizde输入标签文本区域或文本框。如果单击复选框Size：S，它将在标签输入框中显示：size：SX，如果我选择Color：Red，它还将在Tag输入框中显示：Color：Red x，同时两个不同josn对象将被选中的复选框填充。 像：size_object：{name：s，id：2} 和颜色：{名称：红色，编号：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>

Answer 1

最后，我设法通过略微更改此软件工具的体系结构视图来解决此问题。新的架构视图如下：

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