将选定的值传递给vue.js函数

Vue.js

理查德阿飞

2020-03-16

如何将选定的值传递给vuejs函数？ v-model我猜不会帮助。

我需要在item: items | orderBy sortKey reverse where 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>

js

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

第1737篇《将选定的值传递给vue.js函数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
理查德路易 2020.03.16

如果要使用动态值循环并且不能使用v-model，则此方法应该有效

<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>
前端猴子 2020.03.16

如果要将选定的值传递给vuejs函数，请执行以下操作：

  1. 您需要在选择标记中使用v-model指令作为v-model = variableName
  2. 将该变量作为参数传递，例如@ 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>
宝儿AA 2020.03.16

尝试 

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android