VueJS error interactivity on class and styles - binding

Question

I meet an error on class reactivity and dot not find solution despite a lot of tests.
I modify data with local methods and it work but, application on this DOM (reactivity), does not exceed one. After one modification, the DOM is figed.
I use an Vue extend, i use $set to define value of attribute (because the extend of vue use an return object) or direct access, but the result always the same.
Do you have an idea ?
Thanks in advance.
Jérémy

Answer 1

It's an exemple of code (i use webpack to build my vue app, javascript script separate to 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">×</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");
}
});