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

Question

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

在照片中，您可以在右侧看到两个复选框组：1.大小和2.颜色。 和左侧sizde输入标签文本区域或文本框。 如果单击复选框Size：S，它将在标签输入框中显示：size：SX，如果我选择Color：Red，它还将在Tag输入框中显示：Color：Red 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>

Answer 1

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

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