vue.js jquery - jQueryメソッドからのグローバル関数へのアクセス

Question

私はvue.jsで単純なSPAアプリケーションを作成していますが、いくつかのjQueryメソッドを使用しています。問題は、私はjQueryステートメント内でvueのメソッドを使用することはできません。たとえば：

• V-上：私は私の入力フィールドを完了し、4つのイベントを必要とする自動車用easyAutocompleteパックを実装（ボタン上の '追加'）= "addReceiver" をクリック -
• V-上を行って次のように入力します。 =「addReceiver」（入力フィールド上） - 行わ
• リスト項目をクリック - 行わ
• は、リスト項目を入力してください - （不要なものなし）今、私のコードについて

を行っては次のようになります。

export default { 
     data() { 
      return { 
       contacts: [], 
       receivers: [] 

      } 
     }, 
     mounted() { 
      this.fetchMessages(); 

     }, 
     methods: { 
      fetchMessages() { 
       axios.get('api/messages').then(response => { 
        this.contacts = response.data.contacts; 

        var options = { 
         data: this.contacts, 
         getValue: "name", 
         list: { 
          match: { 
           enabled: true 
          }, 
          onClickEvent: function() { 
           var name = $("#to").getSelectedItemData().name; 
           $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); 
           //this.receivers.push(name); CANT DO THAT ALSO!!! 
          }, 
          onKeyEnterEvent: function() { 
           var name = $("#to").getSelectedItemData().name; 
           $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); 
          } 
         } 
        }; 

        $("#to").easyAutocomplete(options); 


       }); 
      }, 
      addReceiver(){ 
       var name = $("#to").val(); 
       $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); 

      } 
     } 
    } 

私のコードは多くの場所で複製する必要があります。addReceiver()の機能を使用することはできません。例えば、onClickEvent: jquery list関数です。

ありがとうございました！

Answer 1

this内側optionsオブジェクトのメソッドは、オブジェクト自体ではなく、オブジェクトインスタンスを指します。タッツ

this.receivers.push(name); //CANT DO THAT ALSO!!! 

が代わりに

を仕事のオプション外const vm = thisが正しいVUEのインスタンスを指しているオブジェクトと閉鎖

methods: { 
     fetchMessages() { 
      axios.get('api/messages').then(response => { 
       this.contacts = response.data.contacts; 

       const vm = this; 

       var options = { 
        data: this.contacts, 
        getValue: "name", 
        list: { 
         match: { 
          enabled: true 
         }, 
         onClickEvent: function() { 
          vm.addReceiver(); 
         }, 
         onKeyEnterEvent: function() { 
          vm.addReceiver(); 
         } 
        } 
       }; 

       $("#to").easyAutocomplete(options); 


      }); 
     }, 
     addReceiver(){ 
      var name = $("#to").val(); 
      this.receivers.push(name); 
     } 
    } 

Answer 2

の使用をするあなたの機能を付与することができるはず定義していない理由optionsオブジェクトの中で、es2015の短縮形のメソッド定義を使用して、コンポーネントの有効範囲にアクセスします。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

var options = { 
    data: this.contacts, 
    getValue: "name", 
    list: { 
     match: { 
      enabled: true 
     }, 
     onClickEvent() { 
      //You now have access to the component as this 
      var name = $("#to").getSelectedItemData().name; 
      $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); 
      this.receivers.push(name); //You should be able to do this now 
     }, 
     onKeyEnterEvent() { 
      //You now have access to the component as this 
      var name = $("#to").getSelectedItemData().name; 
      $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); 
     } 
    } 
}; 

私はaddReceiver()方法は同じことをするでしょう仮定で正しいんだ場合あるいは、あなたができる：

var options = { 
    data: this.contacts, 
    getValue: "name", 
    list: { 
     match: { 
      enabled: true 
     }, 
     onClickEvent: this.addReceiver, 
     onKeyEnterEvent: this.addReceiver, 
    } 
}; 

は、この情報がお役に立てば幸い！