Assume I have a method in a Vue.js ponent that returns a string to be rendered onto the page:

display: (arg) => {
    return arg.name
}

And in the relevant HTML:

<div html="ponent.display(arg)">
</div>

This has worked fine for me until now, but now I want to return HTML with some Vue-bound data on it:

display: (arg) => {
    return '<button @click="myMethod(arg)">Click</button>'
}

Obviously, the above doesn't work. My research has led me to believe that the correct approach here would be to create a ponent and return it, but I just can't seem to get it working. How would I approach this problem?

Assume I have a method in a Vue.js ponent that returns a string to be rendered onto the page:

display: (arg) => {
    return arg.name
}

And in the relevant HTML:

<div html="ponent.display(arg)">
</div>

This has worked fine for me until now, but now I want to return HTML with some Vue-bound data on it:

display: (arg) => {
    return '<button @click="myMethod(arg)">Click</button>'
}

Obviously, the above doesn't work. My research has led me to believe that the correct approach here would be to create a ponent and return it, but I just can't seem to get it working. How would I approach this problem?

• javascript
• vue.js

• Your question is very confusing without knowing 1) What arg is and where it is defined. 2) What ponent is. 3) Where myMethod is defined – Phil Commented Nov 21, 2018 at 5:23

3 Answers 3

I think what you're after is a dynamic ponent.

I would use a puted property to return the ponent definition to take advantage of Vue's reactivity (methods run all the time, puted properties only when required)

<ponent :is="display" :arg="arg" @click="myMethod"></ponent>

and...

puted: {
  display () {
    // you weren't clear on the conditions
    // that should cause this to return something different
    // but here is where you would put them
    return {
      props: ['arg'],
      template: `<button @click="$emit('click', arg)">Click</button>`
    }
  }
}

I'm assuming here that myMethod is defined in the parent, hence adding the @click handler on <ponent> and $emit in the child.

I suppose you could use a method to return the ponent definition but that feels like it would be quite inefficient and there's probably a better way to do it.

Seems like you could make that button its own ponent.

// New ponent
Vue.ponent('arg-button', {
  props: ['arg'],
  data: function () {
    return {
      arg: null
    }
  },
  myMethod: function(arg) {
    console.log(arg)
  },
  template: `
    <button 
      @click="myMethod(arg)">
        Click
    </button>`
})

// Old ponent
Vue.ponent('parent', {
  data: function () {
    return {
      arg: null,
      displayIfArg: true
    }
  },
  template: `
    <arg-button 
      v-show="displayIfArg"
      :arg="arg">
    </arg-button>`

})

Your overall approach is what Vue solves without returning functions-as-strings like that. There's a couple of ways to do it The Vue Way, but it roughly involves conditional instantiation/display of ponents—which should be readily reusable anyway, so thinking you need to base your return on arg itself is likely more hassle than it's worth.

Components should above all be reusable and atomic. Read their docs, esp. on ponents, it'll shed a lot of light.

If you want to write a function that will return a ponent and be able to use vue-bound data but do not want to make that into a separate file, then you can look into render functions in vue