类和样式的 VueJS 错误交互

Question

我在类反应性方面遇到错误，尽管进行了大量测试，但仍找不到解决方案。

我使用本地方法修改数据并且它可以工作，但是这个 DOM 上的应用程序（反应性）不超过一个。一次修改，DOM就搞定了。

我使用Vue扩展，我使用$set定义属性值（因为vue的扩展使用返回对象）或直接访问，但结果始终相同。

你有什么想法吗？

提前致谢。

杰里米

Answer 1

这是一个代码示例（我使用 webpack 构建我的 vue 应用程序，javascript 脚本与 html 分开）。

<div id="modalMemberEdit" class="modal fade modalmember" v-bind:class="{ 'in':showmodal }" role="dialog" v-bind:style="{'display':displaymodal,'border':bordermodal}">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" v-on:click="hideModal">&times;</button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-rouge" v-on:click="hideModal" ></button>
            </div>
        </div>
    </div>
</div>


const modalMemberEdit = Vue.extend({
    name: "modalMember",
    data: function () {
        return {
            displaymodal: "none",
            bordermodal: "15px solid white",
            showmodal: false,
        }
    },
    methods: {
        showEditModal: function( id ) {
            this.$set(this._data,"showmodal",true);
            this.$set(this._data,"displaymodal","block");
        },
        hideModal: function() {

            this.$set(this._data,"showmodal",false);
            this.$set(this._data,"displaymodal","none");
        }
    },
    mounted: function() {
       this.$set(this._data,"showmodal",true);
       this.$set(this._data,"displaymodal","block");
    }
});