create a reusable component in vue.js

Question

How do I make my vue.js component more general and reusable and can pass only the neccessary data?

this is what I want to build:

Structure:

the component has a header
the component has different inputs
the component has a submit button
the component has a list as a footer - that is passed depending on the input

My Approach

the parent

// App.vue
<template>
  <div>
    <!-- Component A -->
    <SettingsCard
     :listA="listA"
     cardType="CompA"
    >
     <template v-slot:header>
       Foo - Component A
     </template>
    </SettingsCard>

    <!-- Component B -->
    <SettingsCard
     :listB="listB"
     cardType="CompB"
    >
     <template v-slot:header>
       Bar - Component B
     </template>
    </SettingsCard>
  </div>
</template>

the child:

// SettingsCard.vue
<template>
  <div>
    <slot name="header"></slot>

    <div v-if="cardType === 'CompA'">
     <!-- Show input and submit button for component a -->
    </div>

    <div v-if="cardType === 'CompB'">
     <!-- Show input and submit button for component b -->
    </div>

    <ListComponent
     :cardType="cardType"
     :list="computedList"
    />
  </div>
</template>

<script>
export default {
  props: {
    cardType: String, // for the v-if conditions
    listA: Array,
    ListB: Array
  },
  data() {
   return {
      namefromCompA: '', // input from component A
      namefromCompB: ''  // input from component B
    }
  },
  computed: {
    computedList() {
      // returns an array and pass as prop the the card footer
    }
  }
}
</script>

The problems

I have undefined props and unused data in my SettingsCard.vue component

// CompA:
props: {
 cardType: 'compA',
 listA: [1, 2, 3], // comes from the parent
 listB: undefined // how to prevent the undefined?
}

// CompA:
data() {
  return {
    namefromCompA: 'hello world',
    namefromCompB: '' // unused - please remove me
  }
}

to use v-if="cardType === 'compA'" feels wrong

Do you have a better approach in mind to make this component reusable and remove anything unnecessary?

Deniz · Accepted Answer · 2021-04-08 13:06:08Z

2

use a method instead of "cardType === 'CompA'".

just try this in your SettingsCard.vue

methods: {
    showMeWhen(type) {
      return this.cardType === type;
    },
  },
}

and your v-if render condition would be like: v-if="showMeWhen('compA')"

update

for exmaple in your namefromCompA/B you can just pass a new prop to display the correct name.

props: {
    cardType: String, // for the v-if conditions
    listA: Array,
    ListB: Array,
    namefromComponent: {
        type: String,
        default: 'NoName'
    }
  },

then in your usage you just pass it like you do with the other props.

<SettingsCard
     :listB="listB"
     cardType="CompB"
     namefrom-component="my Name for component B"
    >

edited Apr 8, 2021 at 13:06

answered Apr 8, 2021 at 12:25

Deniz

1,48819 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wittgenstein Over a year ago

thank you - do you also have a suggestion how I remove the unused properties and data?

Deniz Over a year ago

@wittgenstein i don't understand what you mean. why not simple delete unused stuff and for your undefined set a default vuejs.org/v2/guide/components-props.html

wittgenstein Over a year ago

Why not just delete unused stuff" - that's what I'm looking for. How can I delete unused reactive data variables? I think I need to restructure my component architecture.

wittgenstein Over a year ago

As a addition: There must be a way to avoid creating the instances in the first place. This will spare you from deleting afterwards...

Collectives™ on Stack Overflow

create a reusable component in vue.js

Structure:

My Approach

the parent

the child:

The problems

1 Answer 1

update

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Structure:

My Approach

the parent

the child:

The problems

1 Answer 1

update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related