Vue：渲染列表显示选中的复选框答案

【问题标题】：Vue: Rendered list show selected checkboxesVue：渲染列表显示选中的复选框
【发布时间】：2022-01-05 14:02:52
【问题描述】：

我尝试显示我选择的复选框，渲染如下：

 <pre>{{ JSON.stringify(selectedAttributes, null, 2) }}</pre>
            <ul
              class="list-unstyled"
              v-for="category in categories"
              :key="category.name"
            >
              <strong>{{ category.category_name }} </strong>
              <li
                v-for="attributes in category.attributes"
                :key="attributes.attribute_id"
              >
                <Field
                  as="input"
                  name="attribute"
                  type="checkbox"
                  class="form-check-input"
                  v-model="selectedAttributes"
                  :id="attributes.attribute_id"
                  :value="attributes.attribute_id"
                />
                <label class="form-check-label" for="attributes.attribute_id">
                  {{ attributes.attribute_name }}
                </label>
              </li>
            </ul>

...

  data() {
    return {
      selectedAttributes: [],
    };
  },

不幸的是，我选择的复选框的属性 ID 没有显示。我的错误在哪里？

更新：我的 api 中的数据如下所示：

我在这里需要的是，我希望用户检查他的首选选项并在 JSON.stringify 中显示选定的选项。 selectedAttributes 应显示所选选项的 attribute_id。

【问题讨论】：

请提供更多代码以及您的数据的外观。从这个sn-p不清楚。我们看不到您的categories 的外观以及selectedAtrributes 的用途
您缺少: - 它应该是:for="attributes.attribute_id" 否则它将匹配文字字符串。
@match 更改了它，但 attribute_id 仍然没有显示
@VojinPurić 我更新了我的帖子，希望这能让您更深入地了解我想要完成的工作。

标签： javascript json vue.js rendering

【解决方案1】：

您的数据根本没有attribute_id id 属性。只有attribute_name你可以在你提供的图片上看到

【讨论】：

非常感谢！现在可以使用了
没问题，很高兴我能提供帮助，如果您不介意的话，对答案进行投票会很好