Can you dynamically define properties in a template string in Vuejs?

Question

Can I pass in a template string and also dynamically pass in a property so that I can make it reactive? In the example below I would like message to be reactive, but I don't want to have to predefine it on the data option.

<div id="vue">
 <component :is="string && {template:string}"/>
</div>

new Vue({
    el:'#vue',
    data(){
    return {
    string:undefined,
   }
  },
  created(){
    //setTimeout to simulate ajax call
    setTimeout(()=> this.string = '<div><h1 v-for="n in 1">Hello!    </h1><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>    </div>', 1000)
  }
})

https://jsfiddle.net/kxtsvtro/5/

Are you looking for v-bind?

zero298
– zero298

2018-02-15 17:53:26 +00:00
Commented Feb 15, 2018 at 17:53 — zero298
– zero298, Commented Feb 15, 2018 at 17:53

Roy J · Accepted Answer · 2018-02-15 17:57:28Z

6

You can specify the data in the same way you specify the template: just interpolate it into the component spec.

new Vue({
  el: '#vue',
  data() {
    return {
      string: undefined,
      dataObj: undefined
    }
  },
  created() {
    //setTimeout to simulate ajax call
    setTimeout(() => {
      this.string = '<div><h1 v-for="n in 1">Hello!</h1><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p></div>';
      this.dataObj = {
        message: 'initial'
      };
    }, 1000)
  }
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="vue">
  <component :is="string && {template:string, data: function() { return dataObj}}" />
</div>

answered Feb 15, 2018 at 17:57

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

4 Comments

user1594257 Over a year ago

Can I also pass in a function dynamically for computed? computed: { }

Roy J Over a year ago

I would think so. Give it a shot. You could have a single data object for the entire component spec and populate whatever pieces of it you need to.

user1594257 Over a year ago

Is there a way to load or populate the entire componentspec (AJAX)? I'm hung up on passing in a computed function. I might be going about this all wrong. jsfiddle.net/ot9dh97u/22

Roy J Over a year ago

Ajax doesn't support functions. You would have to serialize and unserialize the function

Daniel S. Deboer · Accepted Answer · 2018-02-15 20:14:13Z

0

It looks like what you want is a component with a <slot> that you can dump a custom component into. If you're trying to compose components that's probably the easiest way to do it.

answered Feb 15, 2018 at 20:14

Daniel S. Deboer

1,5862 gold badges10 silver badges6 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 05:50:14Z

0

You can use Props, but I am not sure if this is the best way to do it :) here is an example:

new Vue({
    el:'#vue',
    data(){
    return {
        string:undefined,
      message:''
    }
  },
  created(){
    //setTimeout to simulate ajax call
    setTimeout(()=> this.string = '<div><h1 v-for="n in 1">Hello!</h1><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p></div>', 1000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> 
<div id="vue">
  <component :is="string && {template:string, props:['message']}" :message="message"/>
</div>

edited Jul 16, 2022 at 5:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 15, 2018 at 17:37

Mohd_PH

1,67713 silver badges19 bronze badges

2 Comments

user1594257 Over a year ago

Is there any way to set a dynamic prop on the component? I don't want it to be always called "message".

Mohd_PH Over a year ago

See Roy's solution i think it is better

Collectives™ on Stack Overflow

Can you dynamically define properties in a template string in Vuejs?

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related