Vue Component delimiters

Question

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',
});

Answer 1

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',
});