Vuejs2 数据更改时VueJS中的转换不'；行不通

我很难理解如何在Vue中处理转换和状态更改

Tihs是我的组件：

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

{{place.name}
{{place.abstractDescription}
Lire plus

导出默认值{
名称：“地点”，
道具：[]，
计算：{
地点（）{
返回此。$store.getters.place
}
},
安装的（）{
}
}
。淡入激活状态。淡入保持激活状态{
转变：不透明度。5s；
}
.fade输入、.fade leave to/*。在版本2.1.8下，fade leave处于活动状态*/
{
不透明度：0；
}

当位置数据发生变化时，转换不起作用。我不明白为什么

---

非常感谢

位置的数据在标记内，转换将根据内部元素（转换内的div）是插入还是删除而应用，，而不是插入或删除，因为只有位置的数据在更改。我还猜测place可能已经在状态中初始化，因此只有当place的值为null并填充时，转换才会再次运行，这取决于v-if=“place”中的值是否为true。如果计算属性中的位置在存储区中为空，则将其设置为null可能会解决您的问题。

尝试使用

v-bind:class=“{fade:place}”

由于解释了行为，您是对的。我的问题是计算属性从不为null。因为存储中有一个用于加载的初始化值，在此之后，如果更改了位置，则始终为以下内容设置数据：/

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