Lấy phần tử gọi bằng vue.js

Question

Tôi muốn lấy phần tử html gọi trong vue.js để sửa đổi nó thông qua jQuery. Bây giờ tôi đưa cho mỗi phần tử tên lớp + chỉ mục và gọi nó qua jQuery sau đó, nhưng điều này trông giống như một bản hack điên rồ.

Những gì tôi muốn làm:

new Vue({ 
    el: "#app", 
    data: { 
     testFunction : function(element) { 
      $(element).doSomethingWithIt(); //do something with the calling element 
     } 
    } 
}); 

Đây là yếu tố gọi:

<div v-on:click="testFunction(???)">Test</div> 

Những gì tôi có thể vượt qua thành chức năng để có được những phần tử div hoặc là có một cách khác để đạt được điều này?

Answer 1

Bạn có thể nhận được các phần tử từ sự kiện như thế này:

new Vue({ 
    el: "#app", 
    methods: { 
     testFunction : function(event) { 
      $(event.target).doSomethingWithIt(); 
     } 
    } 
}); 

Và sau đó:

<div v-on:click="testFunction">Test</div> 

Hoặc (nếu bạn muốn chuyển một thông số khác):

<div v-on:click="testFunction($event)">Test</div> 

[demo]

Answer 2

Bạn đang làm sai cách.

new Vue({ 
    el: "#app", 
    data: { 
     testFunction : function(element) { 
      $(element).doSomethingWithIt(); //do something with the calling element 
     } 
    } 
}); 

data là trạng thái hoặc lưu trữ dữ liệu cho ứng dụng của bạn.

bạn cần tạo methods đối tượng cho các phương pháp của bạn

new Vue({ 
    el: "#app", 
    data: { 

    }, 
    methods: { 

    testFunction : function(element) { 
      $(element).doSomethingWithIt(); //do something with the calling element 
     } 
    } 

}); 

Answer 3

Bạn muốn v-el để có thể chạy jQuery trên đó. Ví dụ:

<div v-on:click="testFunction" v-el:my-element>Test</div> 

thì:

// as noted by @vistajess 
// your function should be in the methods object 
// not the data object 
methods: { 
    testFunction : function() { 
     $(this.$els.myElement).doSomethingWithIt(); 
    } 
}