0

Всем привет,у меня есть такая структура

 <v-card-title class="damage-item">
        <div
          v-for="(component, i) in components.filter(comp => comp.form.checkbox.some(i => i.value))"
          :key="'component-' + i"
          class="item"
        >
          <h3>{{ component.name }}</h3>
          <img v-for="photo in component.form.photos.filter(i => i.url)" :src="photo.url" class="mx-2" style="max-width: 150px; height: auto;" />
          <br>
          <v-card v-for="checkbox in component.form.checkbox.filter(i => i.value)"
                  :key="checkbox.name"
                  class="elevation-1 my-3 mx-2 d-inline-block">
              <v-card-text class="py-2">
                {{ checkbox.name }}
              </v-card-text>
          </v-card>

У меня не получается вынести логику в computed,чтобы не было filter и т.д в верстке,подскажите как правильно)

1
  • component.form.photos.filter(i => i.url) тут удобней делать v-if="photo.url", и в v-card аналогично 19 сен 2018 в 13:59

1 ответ 1

0

Вот так:

computed: {
  // компоненты у которых хоть один чекбокс === true
  selectedСomponents () {
    return this.components.filter(comp => comp.form.checkbox.some(i => i.value))
  },
  // фото у которых есть url
  checkboxesWithValue: () => (component) =>
    component.form.photos.filter(i => i.url)
  // чекбоксы у которых value === true
  checkboxesWithValue: () => (component) =>
    component.form.checkbox.filter(i => i.value)
}

Конечный код:

<v-card-title class="damage-item">
        <div
          v-for="(component, i) in selectedСomponents"
          :key="'component-' + i"
          class="item"
        >
          <h3>{{ component.name }}</h3>
          <img v-for="photo in photosWithUrl(component)" :src="photo.url" class="mx-2" style="max-width: 150px; height: auto;" />
          <br>
          <v-card v-for="checkbox in checkboxesWithValue(component)"
                  :key="checkbox.name"
                  class="elevation-1 my-3 mx-2 d-inline-block">
              <v-card-text class="py-2">
                {{ checkbox.name }}
              </v-card-text>
          </v-card>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.