Переход в VueJS, когда изменение данных не работает - PullRequest
Новая
       17

Переход в VueJS, когда изменение данных не работает

0 голосов
/ 06 марта 2020

У меня есть проблема, чтобы понять, как работать с переходами и изменением состояния в Vue.

Мой компонент - это: 

<template>
<section id="place" class="row">
    <transition class="fade">
        <div v-if="place" id="place-title" class="w-100 d-flex justify-content-center bg-dark text-white">
            <h1>{{ place.name }}</h1>
        </div>
    </transition>
    <div id="place-picture">
        <img class="img-fluid" src="https://www.fillmurray.com/394/221">
    </div>
    <div id="place-description" class="pt-3 pb-3 p">
        <p class="text-justify mb-0" style="font-size: small"><span>{{ place.abstractDescription }}</span>
            <strong>Lire plus</strong>
        </p>
    </div>
</section>


<script>

    export default {
        name: "place",
        props: [],
        computed: {
            place() {
                return this.$store.getters.place
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>

Переход не работает при изменении данных Place. Я не понимаю, почему ...

Большое спасибо!

1 Ответ

1 голос
/ 06 марта 2020

Данные для места находятся внутри тегов, и переход будет применяться в зависимости от того, вставлен или удален элемент внутри (переход div внутри) , , который не является, так как только данные для места меняются. Я также предполагаю, что место может быть уже инициализировано в состоянии, поэтому переход будет выполняться снова, только если значение места равно нулю, а затем заполнено - в зависимости от того, истинно ли оно из v-if = "place". Установка значения null в вычисляемом свойстве, если оно пустое в хранилище, может решить вашу проблему.

...