Passa il valore selezionato alla funzione vuejs

Question

Come posso passare il valore selezionato a una funzione vuejs? v-model non aiuta a indovinare.

ho bisogno di impostare i valori per il filtro dopo item: items | orderBy sortKey reverse dove reverse e sortKey sono valori dinamici.

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

Esistono diversi modi per farlo.

Edit: Migliorata 2)

E 'possibile utilizzare v-modello, proprio come in 2) ma invece di utilizzare il valore direttamente nel filtro orderBy, è possibile utilizzare 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 
     } 
    } 
} 

in questo modo, SortKey e sortOrder sarà disponibile come una proprietà normale in voi filtrare:

v-repeat="items | orderBy sortKey sortOrder" 

1) utilizzare JavaScript evento:

Se non si specifica alcun parametro, l'oggetto evento nativo verrà passato automaticamente

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

È quindi possibile utilizzare in questo modo:

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

2) Uso di v-modello

È possibile aggiungere la direttiva v-modello

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

In questo modo il valore sorting sarà aggiornato ad ogni cambiamento.

È possibile aggiungere questo valore nell'oggetto di dati di voi ViewModel ad essere più chiaro:

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

È quindi possibile accedere al valore, come nel metodo:

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

Se avete solo bisogno per aggiornare il valore sortKey, questo metodo non è nemmeno necessario.

3) Altro modo strano

È apparentemente possibile utilizzare il valore del modello come parametro.

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

Questo funziona ma non vedo il punto.

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