VueJS 方法没有从 Axios 返回响应

Question

现在尝试解决这个问题一段时间，我知道这很简单，但似乎无法解决问题。当我尝试返回 Axios 响应时，我的输出是 {}。当我不返回整个 axios.post 时，我的输出什么都没有。但是当我console.log 数据时，它在控制台中显示得很好。所以我知道我正在正确获取数据。下面是我的测试代码。不知道我做错了什么，如果有人有想法，将不胜感激。

<template>
    <div>
        {{ fetch_name('my_name') }}
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
        }
    },
    methods: {
        fetch_name(name) {
            return axios.post('example.com/api/names', {custom: 'SELECT name FROM `names` WHERE name = "'+name+'"'}).then(response => {
                console.log(response.data[0].name)
                return response.data[0].name
            })
        }
    }
}
</script>

Answer 1

return response.data[0].name

没有从fetch_name返回，只要它发布了获取名称就返回......

您需要做的是将响应放入您的数据中，然后绑定到您的数据，而不是方法。当对 post 的响应进来时，它会触发 UI 更新。

另外，从客户端发送 SQL 似乎超级危险。

Answer 2

适合您的情况的解决方案：

<template>
    <div>
        {{ fetch_name('my_name') && result }}
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                result: 'Loading...',
            }
        },
        methods: {
            fetch_name(name) {
                return axios.post('example.com/api/names', {custom: 'SELECT name FROM `names` WHERE name = "'+name+'"'}).then(response => {
                    console.log(response.data[0].name)
                    this.result = response.data[0].name;
                    return response.data[0].name
                })
            }
        }
    }
</script>

但我认为最好修改如下逻辑：

UI 中带有控件名称的解决方案：

<template>
    <div>
        <input v-model="name">
        {{ result }}
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                name: null,
                result: 'Wait for typing',
            }
        },
        watch: {
            name(name) {
                this.result = 'Loading...';
                axios.post('example.com/api/names', {custom: 'SELECT name FROM `names` WHERE name = "'+name+'"'})
                    .then(response => {
                        this.result = response.data[0].name;
                        return response.data[0].name
                    })
            }
        },
    }
</script>