Vue délimiteurs Component

Question

J'ai un site web pour un client qui doit utiliser vue 1.3 et j'ai du mal avec l'utilisation de l'interpolation de chaîne sur un identifiant car les délimiteurs que j'ai définis ne fonctionnent pas au niveau du composant. Avec l'exemple de code ci-dessous, je reçois toujours une erreur disant que tout ce qui n'existe pas n'existe pas. J'utilise ce code à l'intérieur des modèles de brindilles aussi.

Voici un échantillon de mon 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 interpolation de chaîne à l'aide anti slash.

Vous pouvez le faire de deux façons. Remettre barre oblique avant ou après $. Dans votre cas:

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

Ou

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