Обработка ответа сервера vue.js и axios.js

Question

В ответ на post запрос получаю ответ в виде Теперь хочу в помощью vue.js в случае такого ответа показать сообщение на странице:

<div v-if="success" id="vue">СООБЩЕНИЕ</div>

new Vue({
  el: '#vue',
  data() {
    return {
      success: false
    }
  },

    check() {
      axios
        .post('main2.php', {
        data_1: this.data_1,
        })
        .then(response = "success" {
        this.success = true;
        })
        .catch(function (error) {
            console.log(error);
        });
    }
})

Написал это условие

        .then(response = "success" {
        this.success = true;

Но это очевидно совсем не то, знаю как вывести сообщение в случае ошибки, например если сервер не доступен,

      .catch(error => {
        console.log(error);
        this.errored = true;

а вот как быть с конкретным ответом не пойму.

Answer 1

Ви не правильно написали блок then

check() {
    axios
      .post('main2.php', {
      data_1: this.data_1,
      })
      .then(responce => {
        if (responce.data === 'success'){
          this.success = true
        }
      })
      .catch(function (error) {
          console.log(error);
      });
  }

Answer 2

const API_ENDPOINT = 'https://httpbin.org/post';

new Vue({
    el: '#app',
    data: {
        success: false
    },
    methods: {
        async check() {
            try {
                const { data } = await axios.post(API_ENDPOINT, { data_1: 'tested' });
                console.log(data);
                this.success = true;
            } catch (e) {
                console.log(e.message);
            }
        }
    }

    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="check" :disabled="success">CHECK</button>
    Status: {{ success }}
</div>

БЛОГ НА HUSL

Обработка ответа сервера vue.js и axios.js

Ответы (2 шт):