将数据从Node.js传递到Vue.js

我在将数据从Node.js代码传递到Vue.js时遇到问题

我的Vue.js部分：

<p class="align-self-center m-0">Name</p>
<div v-for="info in infos" v-bind:key="info">
   {{info}}
</div>

import axios from 'axios';

export default {
  name: 'section1',
  data () {
    return {
      infos:""
    }
  },
  mounted(){    
  let headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    };
    axios.get('http://localhost:5000/api/v1/profile/5e21990d8d18cf33f8adf94a',{ headers })
    .then( response => {
        var user = JSON.parse( response.data ).results[0]
        console.log(user)
        this.infos = user.name
        })

  }

}

我想将infos即user.name传递给我的视图。 谢谢您的帮助。

提示：

• 您不需要axios或smth。第三方请求客户端，

  fetch

  工作

• 您的后端可能会响应您所需的内容，只需传入vue并选择所需的内容即可

我没有测试下面的代码，但您的问题可能会像这样被涵盖，如果它解决了您的问题或澄清了一些问题，请验证答案

<template>
  <span>Name {{user.name}}</span>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  async mounted() {
    // API URL must be constant, should be in config.
    const API_URL = "http://localhost:5000/api/v1/profile/5e21990d8d18cf33f8adf94a";
    // Custom headers, but no need for content-type.
    const headers = new Headers({
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*"
    });

    // If the fetch fails,
    try {
      // Fetch with custom headers.
      const user = await fetch(API_URL, { headers })
        .then(response => response.json())
        .then(users => users[0]);
      // Then set the user object to data
      this.user = user;
    } catch (err) {
      console.error(err);
    }
  }
};
</script>

名称{{user.Name}
导出默认值{
数据（）{
返回{
用户：{}
};
},
异步装入（）{
//API URL必须是常量，应在配置中。
常量API_URL=”http://localhost:5000/api/v1/profile/5e21990d8d18cf33f8adf94a";
//自定义标题，但不需要内容类型。
const headers=新的头({
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”
});
//如果提取失败，
试一试{
//使用自定义标题获取。
const user=wait fetch（API_URL，{headers}）
.then（response=>response.json（））
。然后（users=>users[0]）；
//然后将用户对象设置为数据
this.user=用户；
}捕捉（错误）{
控制台错误（err）；
}
}
};

问题是什么，预期的行为是什么？在数据中，您有一个名为

infos

的值，但在模板中，您将其称为

info

。这不是你的问题吗？