JSFiddle - React, Tailwind, and code Playground

by LouDminsk

HTML

<div v-if="respCode.page == 0">
          <p class="uk-text-lead uk-text-uppercase uk-text-left uk-text-break"><span v-html="form_topmsg1"></span></p>
          <p class="uk-text-left uk-text-break">{{ form_topmsg2 }}</p>

        <activation-code-form @form-submitted="addLead2Bitrix24"></activation-code-form>
      </div>
      <div v-else-if="respCode.page == 1">
        <img src="/images/letter_w200.webp">
        <div v-html="thank_you_text"></div>
      </div>
      <div v-else v-html="trouble_message"></div>

Vue

var elibrary = new Vue({
    el: '#app',
    data: {
        respCode: {
            response: "",
            code: 0,
            page: 0,
            comments: ""
        }
    },
    methods: {
        addLead2Bitrix24(activationForm) {
            axios
                .post('https://elibrary.popuri.ru/api/b24codes/',
                    activationForm)
                .then(function (response) {
                    console.log('response ' + response)
                    this.respCode = response.data
                })
                .then(function () {
                    let json_data = JSON.parse(this.respCode.comments)
                    if (json_data.code == 200) {
                        Vue.set(elibrary.respCode, 'page', 1)
                    } else {
                        Vue.set(elibrary.respCode, 'page', -1)
                    }
                })
                .catch(function (error) {
                    console.log('error ' + error)
                    this.respCode.code = 500
                    this.errors.code.push('Internal Server Error. Ошибка проверки кода активации. Попробуйте повторить операцию позже.')
                    Vue.set(elibrary.respCode, 'page', -1)
                });

        }
    }
})