django & Vue.js：为啥我的 VueJs 组件没有显示在前端？
Posted
技术标签:
【中文标题】django & Vue.js：为啥我的 VueJs 组件没有显示在前端？【英文标题】：django & Vue.js: Why is my VueJs component not showing in the frontend?django & Vue.js：为什么我的 VueJs 组件没有显示在前端？ 【发布时间】：2018-09-17 13:05:59 【问题描述】：我正在尝试在当前的 django 项目中实现 vuejs。但组件没有显示在前端。 我的应用程序是“主页”，我在模型中有一个名为“游戏”的类，并在称为“游戏”的视图中运行 所以这里我有我的基本 vue 组件
<template>
<div id="">
<table>
<tr><td>Titre </td><td>Nom </td></tr>
<tr v-for="game in liste">
<td>game.fields.titre</td>
<td>game.fields.nom</td>
</tr>
</table>
</div>
</template>
<script>
export default
data()
return
liste: []
,
mounted()
this.$http.get("/homepage/games").then( (req) => this.liste =
req.data)
</script>
<style>
</style>
App.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import Exemple from './components/Exemple.vue'
Vue.use(VueResource)
new Vue(Exemple).$mount(".exemple")
index.html
% extends "layout.html" %
% block content %
<h1>hello this is challenge 2 tow</h1>
<div class="exemple">
<exemple></exemple>
</div>
% endblock %
layout.html
% load staticfiles %
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
% block content %
% endblock %
</body>
<script src="% static 'public/bundle.js' %"></script>
</html>
views.py
from django.shortcuts import render
from django.core.serializers import serialize
from django.http import HttpResponse
from .models import Games
def games(request):
games = serialize("json", Games.objects.all())
return HttpResponse(games, content_type="application/json")
我安装了 vue 开发工具，它告诉我“未检测到 Vue.js。 请问有什么解决办法吗？！！ 提前谢谢你
【问题讨论】：
你浏览器的开发者工具箱是怎么说的？ 当我点击它时，它显示“未检测到 Vue.js” 不，不是 vue 开发工具； chrome 控制台说什么？ 控制台什么也没写，是空的！！ 【参考方案1】：我发现了错误，我应该给<div id="" >一个类名
所以这里是正确的代码：
<template>
<div class="example">
<table>
<tr><td>Titre </td><td>Nom </td></tr>
<tr v-for="game in liste">
<td>game.fields.titre</td>
<td>game.fields.nom</td>
</tr>
</table>
</div>
</template>
<script>
export default
data()
return
liste: []
,
mounted()
this.$http.get("/homepage/games").then( (req) => this.liste =
req.data)
</script>
<style>
.example
color: red;
</style>
【讨论】：
以上是关于django & Vue.js：为啥我的 VueJs 组件没有显示在前端？的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js img src 使用绝对路径（django+webpack）
如何将我的 Vue js SPA 部署到我的 Django 服务器中？