CODEWITHSUNDEEP
vue.jsvue-componentvuejs3vue-composition-apivue-script-setup
Sasha
Sasha

Reputation: 8705

Vue 3 - Component is not loaded or rendering

I have following component:

<script setup>

import {defineProps, ref, watch} from "vue";
import ProductsComponent from '@/components/Products.vue'
import OrdersComponent from '@/components/Orders.vue'
import {useTableOrderStore} from "@/store/tableOrder";

const tableOrderStore = useTableOrderStore()

const props = defineProps({
  orderID: {
    type: Number
  },
  tableID: {
    type: Number
  },
  tableName: {
    type: String
  }
})

let orders = ref([])

watch(props, (newProp, oldProp) => {
  orders = tableOrderStore.tableOrders

  console.log(orders)
})

</script>
<template>
  <products-component :tableName="tableName"></products-component>
  <orders-component v-for="order in orders" :order="order" :key="order.id"></orders-component>
</template>

And OrdersComponent which is loaded in this component:

<script setup>

import {watch} from "vue";

let props = defineProps({
  order: {
    type: Array,
    required: true
  }
})

watch(props, (newProp, oldProp) => {
  console.log(newProp)
})

console.log(12333)

</script>

<template>
  <div class="row">
    {{ order }}
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, expedita?
  </div>
</template>

When the main component is shown, ProductsComponent is loaded and shown, but OrdersComponent is not. What am I doing wrong here?

Upvotes: 0

Views: 899

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The component is not rendered because the array orders is still empty and the watcher to update it is not working properly which should be written by returning props from callback and adding other options (immediate and deep):

let orders = ref([])

watch(()=>props, (newProp, oldProp) => {
  orders.value = tableOrderStore.tableOrders

  console.log(orders.value)
},{
immediate:true,
deep:true //since props are an object
})

Upvotes: 3

Related Questions