Vue3 数据为空答案

【问题标题】：Vue3 data is nullVue3 数据为空
【发布时间】：2023-01-24 02:14:06
【问题描述】：

我用 vuejs3 创建了一个小样本来显示一些数据。

我确实有连接到服务器。我遇到了 CORS 问题，但已配置代理以从客户端访问数据。

主程序

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

<template>
  <div class="container mt-5">
    <div class="row">
      <div class="col-12">
        <contract-data/>
      </div>
    </div>
  </div>
</template>

<script>
import ContractData from "./components/ContractData.vue";

export default {
  name: "App",
  components: {
    ContractData,
  }
}

ContractData.vue

<template>
    <table class="table">
        <tr><td>Contract-Id</td><td>{{ contractData.id }}</td></tr>
    </table>
</template>

<script>
import axios from 'axios';

export default {
    name: "contract-data",
    data() {
        return {
            contractData: null
        };
    },

    async created() {
        const response = await axios.get("http://localhost:8080/contract/123456");
        console.log(response.data);
        this.contractData = response.data;
    }
};

</script>

问题是：我在异步块的 console.log 语句中看到返回的 json 数据。但是，似乎对 contractData 的分配不起作用。

【问题讨论】：

标签： axios vuejs3

【解决方案1】：

您接收数据作为对象数组，因此您可以使用 v-for 循环访问它们：

const app = Vue.createApp({})
app.component('child', {
  template: `
    <table class="table">
      <thead>
        <td>Contract-Id</td>
        <td>Name</td>
        <td>City</td>
      </thead>
      <tr v-for="contract in contractData" :key="contract.id">
        <td>{{ contract.id }}</td>
        <td>{{ contract.name }}</td>
        <td>{{ contract.address.city }}</td>
      </tr>
    </table>
  `,
  data() {
    return {
      contractData: null
    };
  },
  async created() {
    const response = await axios.get("https://jsonplaceholder.typicode.com/users/");
    this.contractData = response.data;
  }
})
app.mount('#demo')

&lt;/script&gt;

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js" integrity="sha512-L4lHq2JI/GoKsERT8KYa72iCwfSrKYWEyaBxzJeeITM9Lub5vlTj8tufqYk056exhjo2QDEipJrg6zen/DDtoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <div class="container mt-5">
    <div class="row">
      <div class="col-12">
        <child></child>
      </div>
    </div>
  </div>
</div>

【讨论】：