The absence of a template or render function in a Vue.js 3 and Quasar 2 component has resulted in an

Question

The absence of a template or render function in a Vue.js 3 and Quasar 2 component has resulted in an

I am currently working on creating a dynamic component and passing a prop to it. However, I am encountering a warning message that says:

Component is missing template or render function.

Although the component is being rendered, I am still receiving the warning and the prop is not being successfully passed to it.

Parent Section:

<template lang="pug">
q-page
  component(:is="detailsComponent" v-bind="selectedRule")
</template>

<script lang="ts">
import { defineComponent, ref, shallowRef, onMounted } from 'vue'
import { useStore } from 'vuex'
import { storeKey } from '../store'
import { useRoute, useRouter } from 'vue-router'
import { RuleList } from '../components/models'

export default defineComponent({
  name: 'CodeDetails',
  setup() {
    const store = useStore(storeKey)
    const route = useRoute()
    const router = useRouter()

    const detailsComponent = shallowRef({})
    const selectedRule = ref({} as RuleList)

    const selectComponent = async (ruleName: string) => {
      let fileName = ''
      switch (ruleName) {
        case 'retailFoodRules': fileName = 'FoodDetails'
        break
        case 'generalRules': fileName = 'GeneralDetails'
        break
        case 'poolRules': fileName = 'PoolDetails'
        break
        default: fileName = 'OtherDetails'
      }
      const component = await import(`../components/${fileName}`) as unknown
      detailsComponent.value = component.default as RuleList
    }

    onMounted(() => {
      const selected = JSON.parse(route.params.ruleString as string) as RuleList
      const ruleName = route.params.rule
      if (route.params) {
        selectedRule.value = selected as unknown as RuleList
        void store.dispatch('searchResults/saveSelectedRule', selected)
        // void store.dispatch('searchResults/saveRuleName', ruleName)
        void selectComponent(ruleName as string)
      } else if (!route.params && store.state.searchResults.selectedRule) {
        selectedRule.value = store.state.searchResults.selectedRule
        // selectComponent(store.state.searchResults.ruleName)
      } else {
        router.go(-1)
      }
    })

    return { detailsComponent, selectedRule }
  },
})
</script>

Child Component (similar to other dynamic child components):

<template lang="pug">
q-card(flat)
  q-card-section
    q-item-label.text-caption.text-grey-9 Description
    q-item-label.text-subtitle1(v-html="selectedRule.Description")
  q-separator
  q-card-section
    q-item-label.text-caption.text-grey-9 Classification
    q-item-label.text-subtitle1(v-html="selectedRule.Classification" :class="{'text-negative': selectedRule.Classification === 'Priority', 'text-orange-9': selectedRule.Classification === 'Priority Foundation'}")
  q-separator
  q-card-section
    q-item-label.text-caption.text-grey-9 Section
    q-item-label.text-subtitle1(v-html="selectedRule.Section")
  q-separator
  q-card-section
    q-item-label.text-caption.text-grey-9 Category
    q-item-label.text-subtitle1(v-html="selectedRule.Category")
  q-separator
  q-card-section
    q-item-label.text-caption.text-grey-9 Compliance Categories
    q-item-label.text-subtitle1(v-html="selectedRule.Compliance")
  q-separator
  q-card-section
    q-item-label.text-caption.text-grey-9 Rule Text
    q-item-label.text-subtitle1(v-html="selectedRule.FullText")
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import { RuleList } from '../components/models'

export default defineComponent({
  name: 'FoodDetails',
  setup(props) {
    // console.log(Object.assign({}, props))
    const selectedRule = toRefs(props.selectedRule as RuleList)

    return { selectedRule }
  }
})
</script>

Within the child component, I encounter an error that says:

Property 'selectedRule' does not exist on type '{}'.

specifically on the line

const selectedRule = toRefs(props.selectedRule as RuleList)

, indicating that the prop passed is not recognized. Strangely enough, when examining the child component using Vue devtools, it shows selectedRule as an attribute but not as a prop. Is this an oversight on my part or could it be a quirk specific to Quasar?

typescript vue.js vue-component vuejs3 quasar

Answer 1

Answer №1

When considering the parent component, everything appears to be in order, however, when dealing with the child component, you must include the props option :

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import { RuleList } from '../components/models'

export default defineComponent({
  name: 'FoodDetails',
 props:{
     selectedRule : {
        type : Object as PropType<RuleList >
     }
 },
  setup(props) {
    // console.log(Object.assign({}, props))
    const selectedRule = toRefs(props.selectedRule)

    return { selectedRule }
  }
})
</script>

Answer 2

When considering the parent component, everything appears to be in order, however, when dealing with the child component, you must include the props option :

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import { RuleList } from '../components/models'

export default defineComponent({
  name: 'FoodDetails',
 props:{
     selectedRule : {
        type : Object as PropType<RuleList >
     }
 },
  setup(props) {
    // console.log(Object.assign({}, props))
    const selectedRule = toRefs(props.selectedRule)

    return { selectedRule }
  }
})
</script>

Answer 3

Answer №2

I revised the line in the main component from:

component(:is="detailsComponent" v-bind="selectedRule")

to:

component(:is="detailsComponent" :selectedRule="selectedRule")

In the child component, I included a prop key, utilized Object.assign() to retrieve the prop value as it arrives as a proxy, and eliminated toRef() since it lacks reactivity.

export default defineComponent({
  name: 'FoodDetails',
  props: {
    selectedRule: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const ruleObject = Object.assign({}, props.selectedRule) as RuleList

    return { ruleObject }
  }
})
</script>

The warning

Component is missing template or render function.

persists, despite the component successfully rendering and showcasing the data from the prop.

Answer 4

I revised the line in the main component from:

component(:is="detailsComponent" v-bind="selectedRule")

to:

component(:is="detailsComponent" :selectedRule="selectedRule")

In the child component, I included a prop key, utilized Object.assign() to retrieve the prop value as it arrives as a proxy, and eliminated toRef() since it lacks reactivity.

export default defineComponent({
  name: 'FoodDetails',
  props: {
    selectedRule: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const ruleObject = Object.assign({}, props.selectedRule) as RuleList

    return { ruleObject }
  }
})
</script>

The warning

Component is missing template or render function.

persists, despite the component successfully rendering and showcasing the data from the prop.

The absence of a template or render function in a Vue.js 3 and Quasar 2 component has resulted in an

Answer №1

Answer №2

Similar questions

Concerns with combining key value pairs in Typescript Enums

Setting a value to null in Vue JS's v-text-field does clear the input, but the old

Issue encountered while attempting to run an Angular project using the CLI: "Module not found - Unable to resolve 'AngularProjectPath' in 'AngularProjectPath'"

Ways to conceal an element in Angular based on the truth of one of two conditions

Encountering a problem with the Material UI Autocomplete component when trying to implement

Troubleshooting `:=` Syntax Error in Vue.js: A Step-by-Step Guide

Is there a way to pass locale data using props in VueJS Router?

Attempted to identify whether an item exists in an array, and if it does, then add the item to the array; if not, then perform

Shifting the placement of a component in Vue JS when hovering the mouse

Creating QR codes from raw byte data in TypeScript and Angular

What is the method for assigning a string to module variable definitions?

Unleash the power of a module by exposing it to the global Window object using the dynamic

Implementing pagination in Nuxt using asyncData

Unlocking the potential of Vue within shadow dom environments

The Vue js post request encountered an issue due to the absence of the CSRF token

Vue - Send the index value as an argument to the onLoad method

Encountering the "Module not found" error message stating "Error: Unable to locate '@uidu/ckeditor5-tokenizr' when trying to import an npm package that I have just installed."

Component html element in Angular not being updated by service

Filter array to only include the most recent items with unique names (javascript)

I am struggling to comprehend the concept of dependency injection. Is there anyone available to provide a clear explanation for me?