What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

Question

What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

I am working on a project to develop a custom and versatile datatable component. My goal is to be able to adjust the appearance of the datatable on each page, while maintaining consistent functionality. I want to pass data rows into the component and have the flexibility to customize the layout accordingly. However, I am struggling to figure out how to achieve this. Here's an illustration of my dilemma:

For instance, one page may require this template:

<datatable>
    <div v-for="row in rows" class="header" @click="sortBy(row.field)">row.title</div>
    <div v-for="row in rows">row.value</div>
</datatable>

While another page demands a different layout:

<datatable>
    <h1>
        <span v-for="row in rows" @click="sortBy(row.field)">row.title</span>
    </h1>

    <h3 v-for="row in rows">row.value</h3>
</datatable>

I am grappling with a solution to integrate the sortBy function inside the component. Is there a way to make this work seamlessly?

javascript vue.js components vue-component

Answer 1

Answer №1

1. Building a New Component

Component Location: ./src/components/dataTableComponent.vue

<template>
    <datatable>

        <div v-if="!withTitles">
            <div v-for="(row, index) in rows" :key="index" class="header" @click="sortBy(row.field)">row.title</div>
            <div v-for="(row, index) in rows" :key="index">row.value</div>
        </div>

        <div v-id="withTitles">
            <h1>
                <span v-for="(row, index) in rows" :key="index" @click="sortBy(row.field)">row.title</span>
            </h1>
            <h3 v-for="(row, index) in rows" :key="index">row.value</h3>
        </div>

    </datatable>
</template>
<script>
export default {
    name: 'dataTableComponent',
    props: ['rows', 'withTitles'],
    data () {
        return {

        }
    },
    methods: {
        sortBy(field){
            //Sorting logic for this.rows
        }
    }
}
</script>

2. Implementing the Component

<template>
    <div>

        <h2>No Titles</h2>
        <dataTableComponent :rows="rows" :withTitles="true">
        
        <h2>With Titles</h2>
        <dataTableComponent :rows="rows">

    </div>
</template>
<script>
import dataTableComponent from 'src/components/dataTableComponent.vue';

export default {
    components: {dataTableComponent},
    data () {
        return {
            rows: ['AAA', 'BBB', 'CCC']
        }
    }
}
</script>

Explore Vue Documentation for Additional Options

Learn more about Vue components: https://v2.vuejs.org/v2/guide/components.html
Understand Vue components props: https://v2.vuejs.org/v2/guide/components-props.html

Answer 2

1. Building a New Component

Component Location: ./src/components/dataTableComponent.vue

<template>
    <datatable>

        <div v-if="!withTitles">
            <div v-for="(row, index) in rows" :key="index" class="header" @click="sortBy(row.field)">row.title</div>
            <div v-for="(row, index) in rows" :key="index">row.value</div>
        </div>

        <div v-id="withTitles">
            <h1>
                <span v-for="(row, index) in rows" :key="index" @click="sortBy(row.field)">row.title</span>
            </h1>
            <h3 v-for="(row, index) in rows" :key="index">row.value</h3>
        </div>

    </datatable>
</template>
<script>
export default {
    name: 'dataTableComponent',
    props: ['rows', 'withTitles'],
    data () {
        return {

        }
    },
    methods: {
        sortBy(field){
            //Sorting logic for this.rows
        }
    }
}
</script>

2. Implementing the Component

<template>
    <div>

        <h2>No Titles</h2>
        <dataTableComponent :rows="rows" :withTitles="true">
        
        <h2>With Titles</h2>
        <dataTableComponent :rows="rows">

    </div>
</template>
<script>
import dataTableComponent from 'src/components/dataTableComponent.vue';

export default {
    components: {dataTableComponent},
    data () {
        return {
            rows: ['AAA', 'BBB', 'CCC']
        }
    }
}
</script>

Explore Vue Documentation for Additional Options

Learn more about Vue components: https://v2.vuejs.org/v2/guide/components.html
Understand Vue components props: https://v2.vuejs.org/v2/guide/components-props.html

Answer 3

Answer №2

One useful tool in Vue is the slot feature, which allows you to customize components. Check out more information about slots here.

datatable.vue

<template>
  <div>
    <slot name="table-slot"></slot>
  </div>
</template>

<script>
  export default {
    name: 'datatable'
  }
</script>

sampleComp1.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

 <script>
   import datatable from './datatable.vue';

   export default {
     name: 'sampleComp1',
     data() {
        rows: [] // populate this array with your data
     },
     components: {
        datatable
     },
     methods: {
        sortBy(field) {
            // perform necessary actions here
        }
        
     }
   }
</script>

sampleComp2.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

<script>
  import datatable from './datatable.vue';

  export default {
    name: 'sampleComp2',
    data() {
        rows: [] // populate this array with your data
    },
    components: {
        datatable
    },
    methods: {
        sortBy(field) {
            // perform necessary actions here
        }
    }
  }
 </script>

Answer 4

One useful tool in Vue is the slot feature, which allows you to customize components. Check out more information about slots here.

datatable.vue

<template>
  <div>
    <slot name="table-slot"></slot>
  </div>
</template>

<script>
  export default {
    name: 'datatable'
  }
</script>

sampleComp1.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

 <script>
   import datatable from './datatable.vue';

   export default {
     name: 'sampleComp1',
     data() {
        rows: [] // populate this array with your data
     },
     components: {
        datatable
     },
     methods: {
        sortBy(field) {
            // perform necessary actions here
        }
        
     }
   }
</script>

sampleComp2.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

<script>
  import datatable from './datatable.vue';

  export default {
    name: 'sampleComp2',
    data() {
        rows: [] // populate this array with your data
    },
    components: {
        datatable
    },
    methods: {
        sortBy(field) {
            // perform necessary actions here
        }
    }
  }
 </script>

What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

Answer №1

1. Building a New Component

2. Implementing the Component

Explore Vue Documentation for Additional Options

Answer №2

Similar questions

Click on a specific image in a table using Cypress with a specific source URL

Enable a click event within an iFrame by clicking on an element in the parent document

Is there a way to show a 'Refresh' icon in HTML without the need to download an image through HTTP?

Permanently dismiss Bootstrap 4 alert using a cookie

What could be the reason behind my Javascript code returning "object object"?

How to maximize efficiency by utilizing a single function to handle multiple properties in Angular

Error encountered with CORS in a Socket.io Express HTTP server backend

Stylus Vue Vite: The Trio of Global Variables

Encountering 404 errors in production when using vue-router with Node.js for URL paths

Words program with the header feature incorporated

The node experiences a crash when the redis-server goes offline

Utilizing the require pattern to integrate JavaScript functionality into HTML

Combining two numbers retrieved from Firebase using React

The RxDB Angular2-cli error message. "Cannot assign a 'Promise<void>' to a 'Promise<any>' parameter."

How to apply multiple filters in JavaScript?

Automated configuration of AWS Amplify JavaScript using Gitpod

Preventing Vue.js from triggering watch on initial load

Ways to Press the Enter Key on Different Browsers

Changing a date string to MM DD format in React without using plain JavaScript

Angular is not programmed to automatically reflect updates made to my string array