Question

嘿，我正在尝试使用vuejs fastifyjs（节点框架）制作一个全栈应用程序。 vue应用程序从我开发的api获取数据，并在浏览器控制台中显示该数据，但未在应用程序中呈现它。我什至尝试将其加载到mount函数上，但是什么也没发生。

这是我正在使用的完整代码。

const app = new Vue({
  el:'#app',

  data:{
    infos: [{
      name: 'Vue',
      age: 19,
      imageUrl: 's3.aws.amazon.com'
    }, {
      name: 'Vue 2',
      age: 20,
      imageUrl: 's3.aws.amazon.com2'
    }],
    msg: 'Hello Vuejs!'
  },

  methods:{
    getData: function(){
      axios.get('http://localhost:3000/getData')
        .then(function(result){
          this.infos = result.data
          console.log(infos)
        })
        .catch(function(err){
          console.log(err)
        })
    }
  }
})

<div id="app">
  {{msg}}
  <button v-on:click="getData">Get Data</button><br><br>
  <div v-for="info in infos">
    <br>
    <span>Name: {{info.name}}</span><br>
    <span>Age: {{info.age}}</span><br>
    <span>Image: {{info.imageUrl}}</span><br>
  </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="index.js"></script>

这是我所得到的图像。

The default values get rendered and also at the right the array gets logged.

完整的代码在这里 https://github.com/siddiquiehtesham/fullstack-vue-nodejs-api

Answer 1

在您的axios请求中，Job未绑定到您的Vue实例。

使用箭头功能来保持正确的上下文：

this

或在请求前设置getData: function() { axios.get('http://localhost:3000/getData') .then(result => { this.infos = result.data console.log(this.infos) }) .catch(err => { console.log(err) }) }变量：

self

在vuejs应用中从axios提取数据时出错

1 个答案: