クラスとスタイルに対するVueJSエラーの対話性

Question

多くのテストにもかかわらず、クラスの反応性に関するエラーが発生し、ドットが見つかりません。

ローカルメソッドでデータを変更しても動作しますが、このDOM（反応性）のアプリケーションは1を超えません。 1つの変更の後、DOMが表示されます。

私はVueの拡張を使用して、私は属性の値を定義するために$ setを使用します（vueの長さは戻りオブジェクトを使用するため）。または直接アクセスですが、結果は常に同じです。

アイデアはありますか？

ありがとうございます。

ジェレミー

Answer 1

これは、コードのexemple（私は私のVUEアプリ、HTMLに別のJavaScriptのスクリプトを構築するためにWebPACKのを使用）です。

<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"); 
    } 
});