VueJS 메서드가 Axios에서 응답을 반환하지 않음

VueJS 메서드가 Axios에서 응답을 반환하지 않음

지금 잠시 이것을 알아내려고 노력 중이고, 나는 그것이 간단한 것이라는 것을 알지만, 문제를 알아낼 수 없을 것 같다.출력은{}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>

고객님의 사례를 위한 솔루션:

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

return response.data[0].name

에서 돌아오지 않다fetch_namepetch name은 투고 즉시 반환됩니다.

필요한 것은 응답을 데이터에 넣은 다음 방법이 아닌 데이터에 바인딩하는 것입니다.투고에 대한 응답이 들어오면 UI 업데이트가 트리거됩니다.

또, 클라이언트측에서 SQL을 송신하는 것은 매우 위험한 것 같습니다.

언급URL : https://stackoverflow.com/questions/50893989/vuejs-method-not-returning-response-from-axios