Question

我正在尝试在当前的django项目中实现vuejs。但组件没有出现在前端。我的应用程序是＆＃34;主页＆＃34;，我有一个名为＆＃34; Games＆＃34;的模型课程，并在视图中起作用，称为＆＃34;游戏＆＃34; 所以这里我有我的基本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 dev工具，它告诉我＆＃34;没有检测到Vue.js。请问任何解决方案？!! 谢谢你的到来

Answer 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＆amp; Vue.js：为什么我的VueJs组件没有显示在前端？

1 个答案: