Доступ к свойству «продукт» был получен во время рендеринга, но он не определен в экземпляре.

Извините за этот глупый вопрос, я новичок, я нашел много ответов об этой проблеме, но все еще не могу решить свою проблему... Помогите мне, пожалуйста...

Я использую Nuxt3 и просто пытаюсь добавить компонент на страницу, не могу понять, где моя ошибка.

Проблема в том, что перестала работать анимация перехода страниц, но появился компонент

Компонент ServiceCard.vue:

<template>
  <div class = "w-[600px] h-[400px]">
    <img
      src = "@/assets/img/online-store.png"
      alt = "oleksii vratskyi - online store project"
      width = "600"
      height = "400"
    />

    <h5 class = "font-bold text-xl text-stone-300 mt-5">Online store</h5>
  </div>
</template>

<script setup>
const { product } = defineProps(["product"])
</script>

Страница portfolio.vue:

<main>
  <div class = "grid grid-cols-2 place-items-center text-stone-300">
    <div> 
      <ServiceCard :card = "product" /> 
    </div>

    <div> 
      <ServiceCard :card = "product" /> 
    </div>
  </div>
</main>

</template>

<script>
import { ServiceCard } from '@nuxt/schema';
</script>

В product нет ссылки на portfolio.vue.

kissu 21.11.2022 17:34
Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу
Увеличение подматриц на единицу - LeetCode
Переключение светлых/темных тем
Переключение светлых/темных тем
В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно...
Отношения &quot;многие ко многим&quot; в Laravel с методами присоединения и отсоединения
Отношения &quot;многие ко многим&quot; в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой...
В PHP
В PHP
В большой кодовой базе с множеством различных компонентов классы, функции и константы могут иметь одинаковые имена. Это может привести к путанице и...
Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel
Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку...
0
1
101
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я вижу некоторые проблемы...

  • portfolio.vue компонент не имеет определенной product переменной
  • ServiceCard.vue ожидает, что product будет передано как реквизит, но portfolio.vue вместо этого отправляет ему card реквизит
  • на самом деле не вызывает проблем, но рекомендуется следовать соглашениям об именах файлов vue. portfolio.vue должно состоять из 2 слов и писаться с большой буквы, т.е. PortfolioView.vue
  • вы получаете ServiceCard от @nuxt/schema, это не кажется правильным. Вы уверены, что именно там определяется компонент?

Пример

Компонент ServiceCard.vue:

<template>
  <div class = "w-[600px] h-[400px]">
    <img
      src = "@/assets/img/online-store.png"
      alt = "oleksii vratskyi - online store project"
      width = "600"
      height = "400"
    />

    <h5 class = "font-bold text-xl text-stone-300 mt-5">Online store</h5>

    <!-- use prop if you want to include in the child component... -->
    <h1>{{product}}</h1>
  </div>
</template>

<script setup>
// if you're not using the prop, you can remove this prop definition
const { product } = defineProps(["product"])

</script>

Страница PortfolioView.vue:

<main>
  <div class = "grid grid-cols-2 place-items-center text-stone-300">
    <div>
      <!-- if there's no `card` prop defined, no need to send it -->
      <ServiceCard/>
    </div>

    <div>
      <!-- ...but if you do want to pass a product -->
      <ServiceCard :product = "product"/>
    </div>
  </div>
</main>

</template>

<script setup>
// use ⬆setup⬆ here too if you're using setup convention

// just guessing here, but probably where your component might be
import { ServiceCard } from './components/ServiceCard .vue';

// you can define a product here if you want to pass it to the child component
const product = {
  name: "such wow🐕"
}
</script>

Спасибо, приятель) Я решаю свою проблему следующим образом: просто переименуйте ServiceCard.vue в ServiceCard.server.vue | и это работает :)

Oleksii Vratskyi 27.11.2022 14:22

Другие вопросы по теме