Estou criando um projeto básico com Vue 3 e estou tentando renderizar uma mensagem dinâmica usando o recurso de interpolação {{ message }}{{ message }}
. O problema é que, em vez de exibir o valor da variável messagemessage
, ele exibe o texto literal {{ message }}{{ message }}
na página.
Aqui está meu código:
HTML:
Vue Test{{ message }}
const SelfServiceMachine = { data() { return { message: "Hello World" }; } }; Vue.createApp(SelfServiceMachine).mount('#app');
</script>
texto em negrito
Problema:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Test</title>
</head>
<body>
<main id="app">
<h4>{{ message }}</h4>
</main>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const SelfServiceMachine = {
data() {
return {
message: "Hello World"
};
}
};
Vue.createApp(SelfServiceMachine).mount('#app');
</script>
</body>
</html>
Quando carrego a página, o texto {{ message }} aparece literalmente no lugar do valor esperado "Hello World".texto em negrito
O que eu já tenteiProblema:
Verifiquei que o Vue 3 está sendo carregado corretamente no navegador.
Testei seQuando carrego a página, o JavaScript está sem erros. Não há mensagens de errotexto {{ message }}
aparece literalmente no console.
Usei o recurso de limpeza de cachelugar do navegadorvalor esperado (Ctrl + F5).
Recriei um projeto básico para testar, mas o problema persiste"Hello World"
.
O que eu já tentei:
- Verifiquei que o Vue 3 está sendo carregado corretamente no navegador.
- Testei se o JavaScript está sem erros. Não há mensagens de erro no console.
- Usei o recurso de limpeza de cache do navegador (Ctrl + F5).
- Recriei um projeto básico para testar, mas o problema persiste.