Learn the process of dynamically wrapping component content with HTML tags in Vue.js

Question

Learn the process of dynamically wrapping component content with HTML tags in Vue.js

Hey there! I'm looking to enclose the content of a component with a specific HTML tag, let's say button for this scenario.

I have a function that dynamically returns a value which I use as a prop. Based on that, I want to wrap the component's content.

I am aware that I could achieve this by doing something like

<button><compA/></button>

, but that doesn't work for me because it would require changing it in multiple places.

This is what I expect:

<button><div>press me i'm button</div></button>

<div>don't wrap me with button leave me as it is</div>

Note: Setting :wrappwithbutton="" to true for the first case and false for the second case.

const localComponent = {
     name:'first-comp',
     template:`<div> {{text}}</div>`,
     props:['wrappwithbutton','text'],
}



const app = new Vue({
   el:'#app',
   name:'app',
  components:{'first-comp':localComponent},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


  <div id="app">

    <first-comp :wrappwithbutton="true" text="press me i'm button"></first-comp>
    
    <br/>
    <hr/>
    <br/>
    
       <first-comp :wrappwithbutton="false" text="don't wrap me with button leave me as it is"></first-comp>

 </div>

javascript vue.js vuejs3

Answer 1

Answer №1

Here is a great illustration of how render functions can be used effectively. Rather than relying on a pre-defined template, you have the option to utilize a render function to generate the template dynamically for you. Explore more about render functions

const customComponent = {
 name:'custom-comp',
 props:['wrappwithbutton', 'text'],
 methods: {
   btnClick() {
     if (this.wrappwithbutton) console.log('button')
   }
 },
 render(h) {
   return h(this.wrappwithbutton ? 'button' : 'div', [
     h('div', this.text)
   ])
 }
}

const app = new Vue({
  el:'#app',
  name:'app',
  components:{'custom-comp':customComponent},
});

Vue.config.productionTip = false
Vue.config.devtools = false

You can take it a step further by enhancing your customComponent to be more versatile with the parent passing a prop specifying the element to be rendered:

const localComponent = {
 name:'first-comp',
 props:['tag', 'text'],
 methods: {
   btnClick() {
     if (this.wrappwithbutton) console.log('button')
   }
 },
 render(h) {
   return h(this.tag, [
     h('div', this.text)
   ])
 }
}

If you prefer to have just a single div instead of two divs, you can achieve that like so:

render(h) {
   if (this.tag === 'div') {
     return ('div', this.text);
   }

   return h(this.tag ? 'button' : 'div', [
     h('div', this.text)
   ])
}

Answer 2

Here is a great illustration of how render functions can be used effectively. Rather than relying on a pre-defined template, you have the option to utilize a render function to generate the template dynamically for you. Explore more about render functions

const customComponent = {
 name:'custom-comp',
 props:['wrappwithbutton', 'text'],
 methods: {
   btnClick() {
     if (this.wrappwithbutton) console.log('button')
   }
 },
 render(h) {
   return h(this.wrappwithbutton ? 'button' : 'div', [
     h('div', this.text)
   ])
 }
}

const app = new Vue({
  el:'#app',
  name:'app',
  components:{'custom-comp':customComponent},
});

Vue.config.productionTip = false
Vue.config.devtools = false

You can take it a step further by enhancing your customComponent to be more versatile with the parent passing a prop specifying the element to be rendered:

const localComponent = {
 name:'first-comp',
 props:['tag', 'text'],
 methods: {
   btnClick() {
     if (this.wrappwithbutton) console.log('button')
   }
 },
 render(h) {
   return h(this.tag, [
     h('div', this.text)
   ])
 }
}

If you prefer to have just a single div instead of two divs, you can achieve that like so:

render(h) {
   if (this.tag === 'div') {
     return ('div', this.text);
   }

   return h(this.tag ? 'button' : 'div', [
     h('div', this.text)
   ])
}

Answer 3

Answer №2

My suggestion is to streamline the template for better readability

const myComponent = {
  name: "my-comp",
  template: `
    <template v-if="displayButton">
      <button>
        <div> {{content}}</div>
      </button>
    </template>
    <template v-else>
      <div> {{content}}</div>
    </template>
  `,
  props: ["displayButton", "content"]
};

const vueApp = new Vue({
  el: "#app",
  name: "myApp",
  components: { "my-comp": myComponent }
});

Answer 4

My suggestion is to streamline the template for better readability

const myComponent = {
  name: "my-comp",
  template: `
    <template v-if="displayButton">
      <button>
        <div> {{content}}</div>
      </button>
    </template>
    <template v-else>
      <div> {{content}}</div>
    </template>
  `,
  props: ["displayButton", "content"]
};

const vueApp = new Vue({
  el: "#app",
  name: "myApp",
  components: { "my-comp": myComponent }
});

Learn the process of dynamically wrapping component content with HTML tags in Vue.js

Answer №1

Answer №2

Similar questions

Displaying Image Previews in Rails View Using JavaScript

There was an issue with the Google Maps embed API that resulted in an error with interpolation

What is the method to make a CSS selector avoid selecting a specific element?

Tips for successfully sending an API request using tRPC and NextJS without encountering an error related to invalid hook calls

Error encountered while submitting ajax request to server

How to dynamically add events to a JQuery FullCalendar using a loop

Encountering an unexpected token error while building an Angular4 --prod project that involves Three

I am looking to transfer information in CodeIgniter from a view utilizing AJAX post, handle that information in the controller, and then return the resultant array back to the view

Sharing JSON data with public/javascripts/X.js in Node/Express: A beginner's guide

Deploying Vue.js applications

How to add and append values to an array in a Realtime Database

Tips for converting an Array object to JSON format

Is it possible to transform an array into a JSON file and securely store/upload it in an AWS S3 bucket?

Ways to maintain a pointer to a RequireJS module?

Uninstall all packages that are no longer listed in the package.json file using Npm

Guide to passing the parent state as a prop to a child component and enabling the child to modify the state

What is the best way to confirm checkbox selection based on MySQL data?

What is the best way to showcase a local image in the console using nwjs?

Error Alert: Vue is not recognized in Browserify environment

React dynamic table