Question

这也是我的带有Vue Js代码的HTML文件：

    <!DOCTYPE html>
<html>

<head>

    <!-- Vue development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Axios library -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <div id="app">
    <table>
        <thead>
            <tr>
                <th>name</th>
                <th>description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="game in games">
                <td>{{game.Name}}</td>
                <td>{{game.Description}}</td>
                <td>{{game.price}}</td>
            </tr>
        </tbody>
    </table>
    </div>

    <script>

    const app = new Vue({
        el: '#app',
        data: {
            games: []
        },
        methods : {
            //get all the products from the web service using Axios
            loadAllProducts: function(){
                var localApp = this;
                axios.get('/finalgame') //send GET request to games path
                .then(function (response){
                    //returned array of games
                    localApp.games = response.data.data;
                    console.log(JSON.stringify(response.data.data));
                })
                .catch(function (error){
                    //handle error
                    console.log(error);
                });
            }
        },
        created: function(){
            this.loadAllProducts();

            //refreshes every 5 seconds
            setInterval(this.loadAllProducts, 4000);
        }
    })

    </script>

我的Node JS server.js文件：

//Import the express and url modules
var express = require('express');
var url = require("url");

//Status codes defined in external file
require('./http_status');

//The express module is a function. When it is executed it returns an app object
var app = express();

//Import the mysql module
var mysql = require('mysql');

//use index html page
app.use(express.static('./public'))

//Start the app listening on port 8080
app.listen(8080);

//Create a connection object with the user details
var connectionPool = mysql.createPool({
    connectionLimit: 10,
    host: "localhost",
    user: "root",
    password: "",
    database: "pricen",
    debug: false
});

app.get('/messages', (req, res) => {
    console.log("show messages")
    res.end()
})

app.get('/index.html', (req, res) =>{
    res.sendFile(__dirname + '/index.html');
})


//URL to get all game products with price
app.get('/finalgame', (req, res) => {
    console.log("Fetching game product with prices by joining table: " + req.params.id)
    const sqlquery = "SELECT name, description, price FROM game" + " INNER JOIN price ON game.id = game_id"
    connectionPool.query(sqlquery, (err, rows, fields) => {
        console.log("user success!")
        res.json(rows)
    })
})

当您进入localhost：8080 / finalgame时，您会得到以下数据：

[{"name":"Fifa 19...","description":"Fifa 19 game","price":29.85}, 
{"name":"Fifa 20...","description":"Fifa 20 game","price":29.85}, 
{"name":"name":"Far Cry 4...","description":"Far Cry 4...","price":14.85}]

我想使用vue js将JSON数据逐行显示在我的表中，因为显然很容易将其与使用AJAX的HTTPRequest进行比较。当我转到localhost：8080 / index.html时得到的输出：

名称说明价格我已经坚持了好几天了。请帮忙。

Answer 1

检查外壳。响应返回[{"name": "..."}]，您的Vue模板显示{{game.Name}}。

应为{{game.name}}

Answer 2

如果您退回了什么，看起来就像...

[{"name":"Fifa 19...","description":"Fifa 19 game","price":29.85}.....]

这意味着没有data属性，但是得到的是一个数组。因此，尝试：

.then(function (response){
   // remove the extra 'data'   
   localApp.games = response.data;
   console.log(JSON.stringify(response.data));
})

然后与其他答案一样，检查外壳。您的回复中包含小写字母，因此应该为

{{ game.name }}和{{game.description}}

使用Vue Javascript

2 个答案: