Vuetify: Вложенный v-for для создания списков в карточках

Вопрос или проблема

<template>
  <v-container>
    <v-row v-for="recipe in recipes" :key="recipe.id" align-center>
      <v-col>
        <v-card
        class="mx-auto my-12"
        :recipe="recipe"
        max-width="374">
          <v-img
          class="align-end text-white"
          cover
          :src="recipe.image">
          </v-img>
          <v-card-title>
            {{ recipe.title }}
          </v-card-title>
          <v-row>
            <v-col dense cols="12">
              <v-list v-for="item in recpies.missedIngredients" :key="item.id">
                <v-list-subheader>
                  Недостающие ингредиенты {{ recipe.missedIngredientCount }}
                </v-list-subheader>
                <v-list-item>
                  {{ item.name }}
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      recipes: {}
    }
  },
  mounted() {
    fetch('http://localhost:3000/recipes')
    .then(res => res.json())
    .then(data => this.recipes = data)
    .catch(err => console.log(err.message))

  }
}
</script>

<template>
  <v-container>
    <v-row v-for="recipe in recipes" :key="recipe.id" align-center>
      <v-col>
        <v-card
        class="mx-auto my-12"
        :recipe="recipe"
        max-width="374">
          <v-img
          class="align-end text-black"
          cover
          :src="recipe.image">
          <v-card-title>
            {{ recipe.title }}
          </v-card-title>
          </v-img>

          <v-row>
            <v-col dense cols="12">
              <v-list density="compact">
                <v-list-subheader>
                  Недостающие ингредиенты {{ recipe.missedIngredientCount }}
                </v-list-subheader>
                <v-list-item v-for="item in recipe.missedIngredients"
                :key="item.id">
                {{ item.name }}
                </v-list-item>
              </v-list>
            </v-col>
            <v-col>

            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

Ответ или решение

Для создания карточек рецептов, используя данные из JSON-файла с вложенным массивом ингредиентов, следуйте приведенным ниже рекомендациям. Вы уже на правильном пути, и ваш обновленный код выглядит неплохо. Позвольте мне разъяснить ключевые аспекты и предложить улучшения.

HTML Шаблон

Вот ваш шаблон с небольшими изменениями:

<template>
  <v-container>
    <v-row v-for="recipe in recipes" :key="recipe.id" align-center>
      <v-col>
        <v-card class="mx-auto my-12" :recipe="recipe" max-width="374">
          <v-img class="align-end text-black" cover :src="recipe.image">
            <v-card-title>
              {{ recipe.title }}
            </v-card-title>
          </v-img>

          <v-row>
            <v-col dense cols="12">
              <v-list density="compact">
                <v-list-subheader>
                  Недостаток ингредиентов: {{ recipe.missedIngredientCount }}
                </v-list-subheader>
                <v-list-item v-for="item in recipe.missedIngredients" :key="item.id">
                  {{ item.name }}
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

Скрипт

Ваш скрипт вполне корректен, однако рекомендуется убедиться, что вы инициализируете recipes как массив, даже если данные ещё не были загружены. Это предотвратит возможные ошибки при его рендеринге. Вот улучшенная версия вашего скрипта:

<script>
export default {
  data() {
    return {
      recipes: [] // Инициализируем recipes как пустой массив
    }
  },
  mounted() {
    fetch('http://localhost:3000/recipes')
      .then(res => res.json())
      .then(data => {
        this.recipes = data; // Убедитесь, что ваш JSON-ответ является массивом
      })
      .catch(err => console.log(err.message));
  }
}
</script>

Общие рекомендации

1. Проверка данных: Убедитесь, что структура получаемых данных соответствует ожиданиям. JSON должен содержать массив recipes, где каждый объект рецепта имеет поля id, image, title, missedIngredientCount и missedIngredients.

2. Обработка ошибок: Подумайте о добавлении сообщения об ошибке или индикатора загрузки, если запрос на сервер завершится неудачно.

3. Дополнительные стили: При необходимости добавьте CSS-классы для улучшения внешнего вида вашего компонента.

4. Vue.js версии: Убедитесь, что вы используете подходящие версии Vue и Vuetify, так как некоторые компоненты могут работать по-разному в разных версиях.

Заключение

Ваш код уже выглядит многообещающим. Следуя приведенным рекомендациям и учитывая незначительные исправления, вы сможете успешно отобразить список ингредиентов внутри карточек рецептов. Если возникнут дополнительные вопросы или проблемы, не стесняйтесь спрашивать!