Nuxt•2mo ago

triple component

Hello, I create a page with a dynamic main grid in the center. My component hierarchy is as follows: mypage.vue > grid.vue > cardGrid.vue I want to add blocks in my grid as I want with a button and later change their size. But now when I execute my code, without adding blokcs, there are already two cardGrid. And if I inspect the page, in the grid, there's grid.vue twice, as if it had called itself. I hope you can help me. Thank you in advance 🤗 Here my code and a screenshot from the inspector. mypage.vue

<template>

<PageHeader></PageHeader>

<div class="flex flex-col justify-center items-center ">
  <grid items={{ cards }}></grid>
  <Button icon="pi pi-plus" label="Add" outlined class="inset-x-0 bottom-0 m-1 w-4/5" @click="add()"/>
</div>


</template>

<script setup lang="ts">
import PageHeader from '~/components/pageHeader.vue';
import grid from '~/components/grid.vue'

import Button from 'primevue/button';
import 'primeicons/primeicons.css'



const cards = ref<Array<Object>>([])
console.log(cards.value)
const add = () => {
  console.log(cards.value)
  cards.value.push({
    text: 'hello',
    colSpan: 1,
    rowSpan: 1
  })
}

</script>

<template>

<PageHeader></PageHeader>

<div class="flex flex-col justify-center items-center ">
  <grid items={{ cards }}></grid>
  <Button icon="pi pi-plus" label="Add" outlined class="inset-x-0 bottom-0 m-1 w-4/5" @click="add()"/>
</div>


</template>

<script setup lang="ts">
import PageHeader from '~/components/pageHeader.vue';
import grid from '~/components/grid.vue'

import Button from 'primevue/button';
import 'primeicons/primeicons.css'



const cards = ref<Array<Object>>([])
console.log(cards.value)
const add = () => {
  console.log(cards.value)
  cards.value.push({
    text: 'hello',
    colSpan: 1,
    rowSpan: 1
  })
}

</script>

grid.vue

<template>

<div class="grid grid-cols-4 grid-rows-3 gap-2">
  <div v-for="item in props.items" :key="item">
    <cardGrid :text="item.text" :class="`col-span-${item.colSpan} row-span-${item.rowSpan}`"></cardGrid>
  </div>
</div>

</template>

<script setup lang="ts">
import cardGrid from './cardGrid.vue';

const props = defineProps(['items'])

</script>/

<template>

<div class="grid grid-cols-4 grid-rows-3 gap-2">
  <div v-for="item in props.items" :key="item">
    <cardGrid :text="item.text" :class="`col-span-${item.colSpan} row-span-${item.rowSpan}`"></cardGrid>
  </div>
</div>

</template>

<script setup lang="ts">
import cardGrid from './cardGrid.vue';

const props = defineProps(['items'])

</script>/

cardGrid.vue

<template>
  <div class="bg-teal-500 p-24 flex justify-center rounded">
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['text'])


</script>

<template>
  <div class="bg-teal-500 p-24 flex justify-center rounded">
    <p>{{ props.text }}</p>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['text'])


</script>

2 Replies

kapa.ai•2mo ago

Hi @Sorio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the code and description you've provided, it seems you're experiencing an issue with unexpected rendering of components in your Nuxt application. Let's analyze the problem and suggest a solution. The issue you're facing is likely related to how you're passing props and rendering components. Here are a few observations and suggestions: 1. In your mypage.vue, you're passing the cards prop to the grid component incorrectly. The correct syntax for passing props in Vue 3 / Nuxt 3 is using v-bind or the shorthand :. Your code should be:

   <grid :items="cards"></grid>

   <grid :items="cards"></grid>

Instead of:

   <grid items={{ cards }}></grid>

   <grid items={{ cards }}></grid>

2. In your grid.vue component, you're using a v-for directive to iterate over props.items. However, if props.items is empty (which it is initially), this shouldn't render anything. The fact that you're seeing two cardGrid components suggests that there might be some default or unexpected data being passed or rendered. 3. To debug this, you can add a console.log(props.items) in your grid.vue component to see what data is actually being passed. 4. Make sure you're not accidentally importing or using the grid component within itself, which could cause infinite recursion. 5. In your cardGrid.vue, you're using class bindings that depend on item.colSpan and item.rowSpan, but these properties aren't being passed as props. You should add these to your defineProps if you intend to use them. Here's a revised version of your grid.vue that might help:

<template>
  <div class="grid grid-cols-4 grid-rows-3 gap-2">
    <template v-if="props.items && props.items.length">
      <div v-for="(item, index) in props.items" :key="index">
        <cardGrid 
          :text="item.text" 
          :class="`col-span-${item.colSpan} row-span-${item.rowSpan}`"
        ></cardGrid>
      </div>
    </template>
    <template v-else>
      <p>No items to display</p>
    </template>
  </div>
</template>

<script setup lang="ts">
import cardGrid from './cardGrid.vue';

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

console.log('Items received:', props.items)
</script>

<template>
  <div class="grid grid-cols-4 grid-rows-3 gap-2">
    <template v-if="props.items && props.items.length">
      <div v-for="(item, index) in props.items" :key="index">
        <cardGrid 
          :text="item.text" 
          :class="`col-span-${item.colSpan} row-span-${item.rowSpan}`"
        ></cardGrid>
      </div>
    </template>
    <template v-else>
      <p>No items to display</p>
    </template>
  </div>
</template>

<script setup lang="ts">
import cardGrid from './cardGrid.vue';

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

console.log('Items received:', props.items)
</script>

This revised version includes a check to ensure props.items exists and has items before rendering, and also adds a fallback message when there are no items. If you're still seeing unexpected behavior after these changes, it would be helpful to see the console output and a more complete view of your component structure. There might be other factors at play that aren't immediately apparent from the provided code snippets. Remember, when working with Nuxt and Vue components, it's important to avoid destructuring props (https://vuejs.org/api/composition-api-setup.html#accessing-props) as mentioned in the Vue.js documentation, as this can cause reactivity issues Stack Overflow Post > Nuxt 3/Vue 3 Reactivity issue, while rendering component in v-for loop > How it is supposed to work Part 2 (https://stackoverflow.com/questions/77337404). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1114906997549191179> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

triple component