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

Question

我尝试显示我选择的复选框，我是这样渲染的：

 <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: [],
    };
  },

不幸的是，我选中的复选框 attribute_id 没有显示。我的错误在哪里？

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

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

Answer 1

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

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

Vue: Rendered list show selected checkboxes

javascript

json

rendering

vue.js