-2

Estou criando um projeto básico com Vue 3 e estou tentando renderizar uma mensagem dinâmica usando o recurso de interpolação {{ message }}. O problema é que, em vez de exibir o valor da variável message, ele exibe o texto literal {{ message }} na página.

Aqui está meu código:

HTML:

<!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>

texto em negrito

Problema:

Quando carrego a página, o texto {{ message }} aparece literalmente no lugar do valor esperado "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.
2
  • Boas-vindas. Testei e funcionou normalmente. Provavelmente o erro é outra coisa não relacionada diretamente. Forneça um Exemplo Mínimo, Completo e Verificável para podermos ajudar.
    – Syzoth
    Commented 4/12 às 15:13
  • Deu certo! faltou eu colocar <script src="scripts.js"></script>... falta de atenção minha obrigado. Commented 2 dias atrás

1 Resposta 1

-3

O problema está no seu código HTML e JavaScript, mais especificamente na ordem e estrutura de como o Vue é carregado e como o DOM é manipulado.

CorrigidoÇ

Vue Test {{ message }} const SelfServiceMachine = { data() { return { message: "Hello World" }; } }; Vue.createApp(SelfServiceMachine).mount('#app');

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .