Vue.js，Axios，JSon並沒有刷新

對不起，但我嘗試了所有我在網上找到的解決方案。這似乎是一個普遍的問題，但我不能讓它工作。經過一整天后，我放棄了。這一定很愚蠢，任何vue.js大師都會在幾秒鐘內找到該點。任何幫助將不勝感激。Vue.js，Axios，JSon並沒有刷新

重點：我收到一些JSON並嘗試用收到的值更新我的頁面，但這些字段爲空。 jsonSettings.length始終爲0

我想我明白爲什麼：這是肯定，因爲在陣列中的「指針」不改變，因此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)); 

     } 
    } 
})

一次抱歉，但我不能讓它工作，我被困在因爲這樣的江心愚蠢的觀點:-(

來源

2017-06-06 Gregoire Mulliez

的可能的複製[愛可信無法設置數據]（https：// stackoverflow。com/questions/40996344/axios-cant-set-data） – thanksd

錯誤的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。在例子中你會看到我清理了一些其他的東西。

來源

2017-06-06 01:54:22 Bert

感謝伯特，它的工作！如果我理解正確，這是一個範圍問題（this。jsonSettings in axios get「then」沒有指向「Vue」jsonSettings），我會研究你提供的其他解決方案，它工作但我不明白爲什麼（我是一個完整的初學者在JavaScript和vue）。非常感謝您Bert –

@GregoireMulliez不用擔心，這是新手入門javascript和vue的常見錯誤。理解這個概念是很難理解的。 – Bert

對於下一位讀者，Bert提供的=>方法的工作方式就像一個魅力，案例關閉。

我在這裏發佈進一步使用的完整工作代碼，我希望它能幫助您進行研究。

的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安裝--save愛可信和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

我希望能夠在沒有紐約externale鏈接/庫，所以我添加庫Axios公司，使用NPM VUE（和自舉），並添加一個鏈接使用快遞到適當的模塊位置

使服務器代碼：

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:[email protected]: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;

來源

2017-06-06 07:13:33

Vue.js，Axios，JSon並沒有刷新

回答

相關問題