VueJS - how to evaluate curly braces syntax from a prop

Question

I'm trying to create a component which accepts a property which contains curly braces syntax to be interpolated later inside the component.

How can I achieve such thing? Is there a function that I need to call to evaluate the curly braces syntax?

Here is my code

<my-component template="Hello {{ firstname }}"></my-component>

And this is my component

props: {
    template: null
},
data: function() {
    return {
        firstname: 'John',
        lastname: 'Smith'
    }
},
template: `<div>
    My message: <span>{{ template }}</span>
  </div>
`

The result I got

My message: Hello {{ firstname }}

What I'm expecting is

My message: Hello John

JsFiddle: https://jsfiddle.net/xg3464b4/

Bert Bert · Accepted Answer · 2017-05-03T01:30:36

In the case that the data is part of the child component, you can use a scoped slot.

new Vue({
    el: '#app',
    components: {
        'my-component': {
            data: function() {
                return {
                    firstname: 'John',
                    lastname: 'Smith'
                }
            },
            template: `
                <div>
                    My message: <span><slot :firstname="firstname"></slot></span>
                </div>
            `
        }
    }
});

And the template

<div id="app">
  <my-component>
    <template scope="{firstname}">
        Hello {{firstname}}
    </template>
  </my-component>
</div>

Your updated fiddle.

VueJS - how to evaluate curly braces syntax from a prop

1 Answers