Vue.js、Axios、JSon 且无刷新

Question

抱歉post，但我尝试了我在网上找到的所有解决方案。这似乎是一个常见问题，但我就是无法解决。一整天后，我放弃了。这一定是个傻点，任何vue.js大师都会在几秒钟内找到这个点。任何帮助将不胜感激。

要点：我收到了一些 JSON 并尝试使用收到的值更新我的页面，但字段为空。 jsonSettings.length 始终为 0。

我想我明白为什么：这肯定是因为数组上的 'pointer' 没有改变，所以 vue.js 没有检测到内容的变化，或类似的东西，但我只是无法让它工作，这让我发疯。

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>
    <div id="app">
        Message : {{ message }} <BR>
        Length : {{ jsonSettings.length }} <BR>
        Typeof : {{ jsonSettings.typeof }} <BR>
        <button v-on:click="getData()">Load data</button>
        <button v-on:click="printData()">Print data</button>
    </div>
</body>
<script src="/javascripts/axios.js"></script>
</html>

我的JavaScript：

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        // jsonSettings: [],
    },
    methods: {
        jsonSettings : function() {
            return (
                [
                    { id: 0, resume: 'test 0'},
                    { id: 1, resume: 'test 1'},
                    { id: 2, resume: 'test 2'}
                ]
            )
        },

        getData : function () {
            axios.get('/axios/LoadAxiosData')
                .then(function (response) {
                    this.jsonSettings = response.data;
                    this.message = "getData - I get objects : " + jsonSettings.length + " lines ";
                    this.$set('jsonSettings', response.data);
                    this.message = "getData - OK";

                })
                .catch(function (error) {
                    this.message = "getData - I get null";
                });
        },

        printData: function () {
            this.message =  "printData - jsonSettings.length  = [" + jsonSettings.length + "]";

            jsonSettings.map((item, i) => console.log('Index:', i, 'Id:', item.resume));

        }
    }
})

再次抱歉，但我无法让它工作，因为这个愚蠢的点，我被困在河中间:-(

Answer 1

不正确 this 再次罢工。本质上，axios 回调中的 this 不是对 Vue 的引用。为了使其指向 Vue，您需要使用箭头函数，或使用 bind 或在闭包中捕获正确的 this。在这里，我使用了箭头函数。

getData : function () {
  axios.get('/axios/LoadAxiosData')
    .then(response => {
      this.jsonSettings = response.data;
      this.message = "getData - I get objects : " + jsonSettings.length + " lines ";

    })
    .catch(error =>  {
        this.message = "getData - I get null";
    });
},

见How to access the correct this inside a callback?

同时删除您的 jsonSettings 方法并重新添加数据属性。

data: {
    message: 'Hello Vue!',
    jsonSettings: [],
},

工作example。您会在示例中看到我清理了其他一些东西。

Answer 2

对于下一位读者，Bert 提供的 => 方法非常有效，案例已结案。

我post这里是完整的工作代码以供进一步使用，希望对您的研究有所帮助。

HTML代码页：

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>
    <div id="app">
        Message : {{ message }} <BR>
        Length : {{ jsonSettings.length }} <BR>
        <ul>
            <li v-for="setting in jsonSettings">
                {{ setting.resume }}
            </li>
        </ul>
        <button v-on:click="getData()">Load data</button>
        <button v-on:click="printData()">Print data</button>
    </div>
</body>
<script src="/javascripts/axios.js"></script>
</html>

vue javascript :

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        jsonSettings: []
    },
    methods: {
        getData : function () {
            axios.get('/axios/LoadAxiosData')
                .then(response => {
                    this.jsonSettings = response.data;
                    this.message = "getData - I get objects : " + jsonSettings.length + " lines ";
                    this.$set('jsonSettings', response.data);
                })
                .catch(function (error) {
                    this.message = "getData - I get null";
                });
        },

        printData: function () {
            this.message =  "printData - jsonSettings.length  = [" + this.jsonSettings.length + "]";
            this.jsonSettings.map((item, i) => console.log('Index:', i, 'Id:', item.resume));

        }
    }
})

对于服务器代码 - 不要忘记 npm install --save axios 和 vue 并在你的路由器中添加这些行：

app.use('/js', express.static(__dirname + '/node_modules/vue/dist')); // redirect Vue.js
app.use('/js', express.static(__dirname + '/node_modules/axios/dist')); // redirect axios.js

我希望能够在没有任何外部 links / 库的情况下使用和开发，所以我使用 npm 添加了 libs axios、vue（和 boostrap），并使用 express 添加了一个 link正确的模块位置

所以服务器代码：

var express = require('express');
var router = express.Router();

// don't forget to change yur dbuser username, password and database name
const sequelize = new Sequelize('postgres://dbuser:password@localhost:5432/database');

const Testing = sequelize.define('testing', {
    resume: Sequelize.TEXT,
    description: Sequelize.TEXT,
    state: Sequelize.BOOLEAN
});

router.get('/', function(req, res, next) {
    res.render('axios', { testings: null });
});

router.get('/LoadAxiosData', function(req, res, next) {
    Testing.findAll({
        order: [ [ 'state' ] ]
    })
        .then (function(testings)   {
            res.json(testings);
        })
        .catch(function(error) {
            console.log("### Error ###" + error);
            res.send(null);
        });
});

// to create database structure - portgresql 
router.get('/init', function (req, res, next) {
    Testing.sync ({force:true});
    res.redirect('/');
});

module.exports = router;

Vue.js、Axios、JSon 且无刷新

Vue.js, Axios, JSon and no refresh

arrays

binding

json

vue.js

axios