Блог

Я хочу дождаться успеха axios, чтобы запустить модальный режим, или не запустить модальный режим без изменения каких-либо существующих стилей. Текущий код всегда запускается без ожидания ответа axios, даже если был добавлен v-if .

Текущий код:

 <template>
<div>
    <div class="col-12 text-center">
        <a @click="func()" class="btn btn-sm btn-round btn-success save-button" data-toggle="modal" data-target="#success-save">submit</a>
    </div>


    <div v-if="modalDisplay" class="modal modal-top fade" id="success-save" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">amp;times;</span>
                </button>
                <h3 class="text-center" style="color:white;"><strong>Success</strong></h3>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            modalDisplay: false,
        }
    },
    methods: {
        func() {
            axios.post('/some/uri', {
                'content': 'abc',
            })
                .then(response => {
                    this.modalDisplay = true;
                });
        },
    }
</script>
  

Я пробовал переместить v-if и другие, но это все еще не работает, или это уже работает, но стиль изменился, ваше решение будет очень полезным, спасибо!

Редактировать: я использую Vue 2.6.11, изменил код

В Vue 2.x шаблоны должны содержать только один элемент внутри него. Попробуйте поместить все теги в div следующим образом

 <template>
  <div>
    <div class="col-12 text-center">
        <a @click="func()" class="btn btn-sm btn-round btn-success save-button" data-toggle="modal" data-target="#success-save">submit</a>
    </div>
    <div v-if="modalDisplay" class="modal modal-top fade" id="success-save" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">amp;times;</span>
                </button>
                <h3 class="text-center" style="color:white;"><strong>Success</strong></h3>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>  

Также добавьте блок кэша к вашему вызову axios

 axios.post('/some/uri', {
            'content': 'abc',
        })
            .then(response => {
                this.modalDisplay = true;
            })
            .catch(error=> {
                console.log(error);
            });
  

В Vue 3 вы можете использовать фрагменты для достижения этой цели без объединения в один узел

Вы можете найти реализацию здесь