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

What is the process for extracting data from a picker using v-model in the framework7 framework?

Is there an option for keyPrefix in i18next?

Using createPersistedState in a vuex and quasar application: A complete guide

Creating a Vue2 modal within a v-for loop to display a dynamic

Testing the automation processes of a React or Node project

Creating a variable by utilizing $index values within two nested v-for loops

Using Angular 2, NodeJS, and Mongoose to send data from an Angular 2 frontend to a NodeJS backend REST API. However, encountering an issue where the Node API logs show that the OPTIONS

The class constructor in the TSdx package must be invoked with the 'new' keyword

What steps can be taken to avoid special characters in ion-input fields?

Angular: detecting mobile status within template

Updating Angular 8 Component and invoking ngOninit

Try out a Vue.js Plugin - A Comprehensive Guide

Oops! Looks like there's an issue with the type error: value.forEach is

Guide to creating varying component sizes using ReactJS and Styled Components

Exploring Vue 3 reactivity with a primitive reference passed as a prop

Obtaining Data from a Database Using Angular

Ionic 2 - Dynamically Loading Segments

React TypeScript Context - problem with iterating through object

The vuex 3 state variable is currently undefined

Error TS2345: The function with arguments of type '(req: any, res: any, ctx: any) => any' cannot be assigned to the parameter of type 'HttpResponseResolver<PathParams<string>'