javascript - Vue : Rendered list show selected checkboxes

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 没有显示。我的错误在哪里？

更新: 来 self 的 api 的数据如下所示:

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

Answer 1

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