Dynamic v-model with component :is

Hello i have this use case in my mind.

Let's assume i have a list of components like this ( For context this is a modal with customer info reviews, product bought etc)

  const componentMap = {
    Products: ProductsPage,
    Reviews: ReviewsPage,
     etc...
  };

  const componentMap = {
    Products: ProductsPage,
    Reviews: ReviewsPage,
     etc...
  };

And use component :is like this

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:dynamicKey="data"
    />

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:dynamicKey="data"
    />

What i have in mind is if it would be possible to make the v-model key dynamic depending on the component for example after refactoring the componentMap

  const componentMap = {
    Products: {component:ProductsPage,modelKey:"products",values:products.value},
    Reviews: {component:ReviewsPage,modelKey:"reviews",values:reviews.value},
     etc...
  };

  const componentMap = {
    Products: {component:ProductsPage,modelKey:"products",values:products.value},
    Reviews: {component:ReviewsPage,modelKey:"reviews",values:reviews.value},
     etc...
  };

Atm i have all the v-models which it works but idk if it is the best approach

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:products="productData"
   v-model:reviews="reviewData"
    />

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:products="productData"
   v-model:reviews="reviewData"
    />

Nuxt•15mo ago•

4 replies

Wicker

Dynamic v-model with component :is

Hello i have this use case in my mind.

Let's assume i have a list of components like this ( For context this is a modal with customer info reviews, product bought etc)

  const componentMap = {
    Products: ProductsPage,
    Reviews: ReviewsPage,
     etc...
  };

  const componentMap = {
    Products: ProductsPage,
    Reviews: ReviewsPage,
     etc...
  };

And use component :is like this

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:dynamicKey="data"
    />

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:dynamicKey="data"
    />

What i have in mind is if it would be possible to make the v-model key dynamic depending on the component for example after refactoring the componentMap

  const componentMap = {
    Products: {component:ProductsPage,modelKey:"products",values:products.value},
    Reviews: {component:ReviewsPage,modelKey:"reviews",values:reviews.value},
     etc...
  };

  const componentMap = {
    Products: {component:ProductsPage,modelKey:"products",values:products.value},
    Reviews: {component:ReviewsPage,modelKey:"reviews",values:reviews.value},
     etc...
  };

Atm i have all the v-models which it works but idk if it is the best approach

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:products="productData"
   v-model:reviews="reviewData"
    />

    <component
      :is="componentMap[componentName]"
      :modalOpen="modalOpen"
      :title="tile"
      v-model:products="productData"
   v-model:reviews="reviewData"
    />

Dynamic v-model with component :is

Similar Threads

Dynamic v-model with component :is

Similar Threads

Similar Threads

Similar Threads