Передача данных от Node.js до Vue. js

Question

У меня проблема с передачей данных из Node.js кода в Vue. js

my Vue. js part:

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

и Node.js part:

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
        })

  }

}

Я хочу передать информацию, т.е. user.name, на мой взгляд. Спасибо за вашу помощь.

Answer 1

Советы:

• Вам не нужен топор ios или что-то в этом роде. сторонний клиентский запрос, 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>