Question

如何将从axios检索到的值分配给v-text-field

我的模板中有此文件：

<v-text-field
   v-model="name"
   label="Name"></v-text-field>

    <script>
    import axios from 'axios';

    export default {
      data() {
        return {
          name: '' // <= how will I assign the value here from axios response?
        }
      },
      asyncData ({ params }) {
        return axios.get(`my-url`)
        .then((response) => {
          return { user: response.data.data.results[0] };
        });
      }
    }
</script>

Answer 1

我假设您正在使用NUXT（通过asyncData方法）。

从asyncData方法返回的数据将合并到组件的数据中。

您应该执行以下操作：

<template>
    <v-text-field
            v-model="name"
            label="Name"></v-text-field>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {}
        },
        asyncData ({ params }) {
            return axios.get(`my-url`).then((response) => {
                return { name: response.data.data.results[0].name };
            })
        }
    }
</script>

Answer 2

如何使用created钩子？

created() {
   this.name = this.user.name
}

从axios响应向v-text-field添加数据

2 个答案: