Передайте выбранное значение функции vuejs

Как передать выбранное значение функции vuejs? v-model мне не поможет.

Мне нужно установить значения для фильтра после item: items | orderBy sortKey reverse где reverse и sortKey - динамические значения.

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>

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

Ответ 1

У вас есть несколько способов сделать это.

Редактировать: Улучшено 2)

Можно использовать v-модель, как в 2), но вместо использования значения непосредственно в вашем фильтре orderBy, вы можете использовать вычисляемые свойства

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
        }
    }
}

Таким образом, sortKey и sortOrder будут доступны как обычное свойство в вашем фильтре:

v-repeat="items | orderBy sortKey sortOrder"

1) Используйте событие JavaScript:

Если вы не укажете какой-либо параметр, собственный объект события будет передан автоматически

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

Затем вы можете использовать его так:

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

2) Использование v-модели

Вы можете добавить директиву v-модели

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

Таким образом, значение sorting будет обновляться при каждом изменении.

Вы можете добавить это значение в объект данных вашего ViewModel, чтобы быть более понятным:

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

Затем вы можете получить доступ к значению, как в вашем методе:

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

Если вам просто нужно обновить значение sortKey, этот метод даже не нужен.

3) Другой странный путь

Очевидно, вы можете использовать значение вашей модели в качестве параметра.

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

Это работает, но я не вижу смысла.

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

Ответ 2

Если вы хотите передать выбранное значение в функцию vuejs, выполните следующие действия:

вам нужно использовать директиву v-модели в теге select, так как v-model = variableName
передать эту переменную в качестве параметра, например @on-change = sortBy (variableName);

Итак, ваш код будет выглядеть так:

<select class="sort-filter" v-model="sortingVariable" @on-change="sortBy(sortingVariable)"> 
   <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>

Ответ 3

Это должно работать, если вы хотите выполнить цикл с динамическими значениями и не можете использовать v-модель

<select name="option" v-on:change="selectedOption($event.target.value)">
    <option value="0">SELECT</option>
    <option v-for="i in 10" :value="i">{{ i }}</option>
</select>

Ответ 4

пытаться

<select name="option" @change="myFunction($event.target.value)">
   <option v-for="item in list" :value="item.code" :key="item.code">{{ item.name }}</option>
</select>

// Function
myFunction(value) {
  console.log(value);
}