CODEWITHSUNDEEP
componentsvue.jsdelimiter
TheMan68
TheMan68

Reputation: 1469

Vue Component delimiters

I have a website for a client which must use vue 1.3 and I'm having trouble with using string interpolation on an id as the delimiters that I've defined are not working at the component level.

With the code sample below I keep getting an error saying that i'whatever' doesn't exist. I'm using this code inside twig templates also.

Here is a sample of my code: 

Vue.config.delimiters = ['${', '}'];

Vue.component('component-name', {
    delimiters: ['${', '}'],
    template: `<template>${ showSomething() }</template>`,
    methods: {
        showSomething: function () {
            return 'SOMETHING';
        }
    }
})

new Vue({
      el: '#app',
});

Upvotes: 3

Views: 3497

Answers (1)

Srinivas Damam
Srinivas Damam

Reputation: 3045

Escape from string interpolation using back slash.

You can do it in two ways. Put back slash before or after $ sign. In your case:

template: `<template>\${ showSomething() }</template>`,

Or 

template: `<template>$\{ showSomething() }</template>`,

app.js

Vue.config.delimiters = ['${', '}'];

Vue.component('component-name', {
    delimiters: ['${', '}'],
    template: `<template>\${ showSomething() }</template>`, // 'back slash to escape string interpolation'
    methods: {
        showSomething: function () {
            return 'SOMETHING';
        }
    }
})

new Vue({
      el: '#app',
});

Upvotes: 5

Related Questions