Front Quebrando, Projeto Django carrinho de compras.

[Maikol Gabriel]

Oi pessoal, tudo bem? Seguinte, estou aprendendo ainda. Estou criando um sistema de controle de estoque e já tenho duas apps funcionando: uma para produtos e outra para clientes, ambas seguindo o CRUD. Agora, estou criando a app de carrinho de compras, onde na página shopping.html, o usuário escolherá um cliente através de um campo select. Ao clicar no select, uma lista é exibida, e ele pode escolher um dos clientes cadastrados na app de clientes, etc. O ponto é que estou usando o Vue.js na app de carrinho de compras, e na página shopping.html, a função do Vue será fazer os cálculos matemáticos de soma em tempo real. Estou enfrentando problemas, pois em um cenário isolado, apenas a app funciona em outro projeto Django. Funciona OK. No entanto, ao incorporá-la no projeto Django principal, ela fica quebrada. Em vez de exibir "R$00,00" e fazer a soma quando adiciono os produtos, ela fica quebrada no front-end. O console também não apresenta erros, então estou perdido. Alguma alma boa pode me ajudar?

Estou usando:
Python==3.10.11
Django==3.2.18
Bootstrap==4.6.0
Chart.js==2.9.4
DataTables==1.10.24
fontawesome-free==5.15.3
jQuery==3.6.0
jquery-easing==1.4.1
Axios
Vue==2.6.11
vue-toast-notification==0.6.1

Upei o código no gist, fica melhor pra entender :  Shopping.html (github.com)

[Silas Vasconcelos]

Cara me parece que você não está carregando o Vue.js neste parte, esse comportamento de exibir o código como na imagem e não exibir erro no console é 99% de chance de ser isso.

Não sei se está carregando os arquivo do projeto ou um CDN, mas verifica se o Vue.js está sendo carregado.

Silas Vasconcelos CEO / Software Engineer S. V. DESENVOLVIMENTO DE SOFTWARES LTDA - 48.398.486/0001-94

con...@silasvasconcelos.com.br 61 9 8618-1809 silasvasconcelos.com.br

O conteúdo deste e-mail é confidencial e é destinado apenas ao destinatário especificado na mensagem. É estritamente proibido compartilhar qualquer parte desta mensagem com terceiros, sem o consentimento por escrito do remetente. Se você recebeu esta mensagem por engano, por favor responda a esta mensagem e siga com sua exclusão, para que possamos garantir que esse erro não ocorra no futuro.

Sent with Spark

--
Você recebeu essa mensagem porque está inscrito no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django-brasi...@googlegroups.com.
Para acessar essa discussão na Web, acesse https://groups.google.com/d/msgid/django-brasil/feda7140-b69e-46ed-82c8-30f8c1db1d2dn%40googlegroups.com.

[Maikol Gabriel]

O print é um pouco desatualizado, porém o erro se mantem o console nem printa erro mais, estou usando o vue via cdn não deu mais erro, porém o erro persiste 

[Silas Vasconcelos]

Você inicializou o vue na página?

Lembra que o vuejs precisa ser inicializado, geralmente é uma div com o id app (#app), verifica isso.

Doc: https://vuejs.org/guide/introduction.html#what-is-vue

Silas Vasconcelos CEO / Software Engineer S. V. DESENVOLVIMENTO DE SOFTWARES LTDA - 48.398.486/0001-94

con...@silasvasconcelos.com.br 61 9 8618-1809 silasvasconcelos.com.br

O conteúdo deste e-mail é confidencial e é destinado apenas ao destinatário especificado na mensagem. É estritamente proibido compartilhar qualquer parte desta mensagem com terceiros, sem o consentimento por escrito do remetente. Se você recebeu esta mensagem por engano, por favor responda a esta mensagem e siga com sua exclusão, para que possamos garantir que esse erro não ocorra no futuro.

Sent with Spark

Para acessar essa discussão na Web, acesse https://groups.google.com/d/msgid/django-brasil/6a0bbc9d-d6a6-4f6f-b773-a1627e07c4d2n%40googlegroups.com.

[Maikol Gabriel]

Sim sim, eu upei no gist os código, lá está o código do shopping.html onde eu chamo o vue na primeira div

{% extends "base_admin.html" %}
{% load static %}
 {% block content %}  
         
         <div id="app" class="text-center">

[Leonardo Salvadori]

não tenho experiência com django templates, mas como sugestão dá uma olhada nessa doc [1], é um metodo que disponibiliza o obj como json para você consumir no front.

como você está "criando" seu projeto, e utilizando vue, provavelmente você vai explorar bastante o frontend, nesse contexto, o ideal, mais correto, e mais fácil, seria você consumir o backend através de uma api, ou seja, refatorar suas views para serem consumidas pelas requests

dessa forma fica muito mais simples de você integrar com o VUE ou qualquer outro framework de frontend, inclusive, futuramente na versão mobile do seu projeto.

[1] https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#json-script

--