Vượt qua giá trị đã chọn cho hàm vuejs

Question

Làm cách nào để chuyển giá trị đã chọn cho hàm vuejs? v-model sẽ không giúp tôi đoán.

tôi cần phải đặt giá trị cho bộ lọc sau item: items | orderBy sortKey reverse nơi reverse và sortKey là những giá trị năng động.

html

<select class="sort-filter" v-on="change: sortBy(???)"> 
    <option value="title asc">Title (A-Z)</option> 
    <option value="title desc">Title (Z-A)</option> 
    <option value="price asc">Price (Min. - Max.)</option> 
    <option value="price desc">Price (Max. - Min.)</option> 
</select> 

js

methods: { 
    sortBy: function (sortKey) { 
     console.log(sortKey) 
    } 
    } 

Answer 1

Bạn có nhiều cách để làm điều đó.

Edit: Cải thiện 2)

Có thể sử dụng v-mô hình giống như trong 2) nhưng thay vì sử dụng các giá trị trực tiếp trong bộ lọc orderBy của bạn, bạn có thể sử dụng computed proprieties

computed: { 
    sortKey: { 
     get: function() { 
      return this.sorting.split(' ')[0]; // return the key part 
     } 
    }, 
    sortOrder: { 
     get: function() { 
      return this.sorting.split(' ')[1]; // return the order part 
     } 
    } 
} 

Bằng cách này, sortKey và sortOrder sẽ có sẵn như một sự bình thường trong bạn lọc:

v-repeat="items | orderBy sortKey sortOrder" 

1) Sử dụng sự kiện javascript:

Nếu bạn không chỉ định bất kỳ thông số, các đối tượng sự kiện có nguồn gốc sẽ được chuyển tự động

<select class="sort-filter" v-on:change="sortBy"> 

Sau đó bạn có thể sử dụng nó như thế này:

methods: { 
    sortBy: function(e) { 
     console.log(e.target.value); 
    }, 
} 

2) Sử dụng v-model

Bạn có thể thêm chỉ thị v-model

<select name="test" v-model="sorting" v-on:change="sortBy"> 

Bằng cách này giá trị sorting sẽ được cập nhật trên mọi thay đổi.

Bạn có thể thêm giá trị này trong đối tượng dữ liệu của bạn ViewModel để được rõ ràng hơn:

data: { 
    sorting: null // Will be updated when the select value change 
} 

Sau đó bạn có thể truy cập các giá trị như trong phương pháp của bạn:

methods: { 
    sortBy: function() { 
     console.log(this.sorting); 
    }, 
} 

Nếu bạn chỉ cần để cập nhật giá trị sortKey, phương pháp này thậm chí không cần thiết.

3) cách kỳ lạ khác

Bạn dường như có thể sử dụng giá trị mô hình của bạn như một tham số.

<select name="test" v-model="sortKey" v-on:change="sortBy(sortKey)"> 

Điều này có hiệu quả nhưng tôi không thực sự thấy điểm.

methods: { 
    sortBy: function(sortKey) { 
     console.log(sortKey); 
    }, 
}