Question

如何将所选值传递给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>

JS

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

Answer 1

你有几种方法可以做到。

修改：改进2）

可以像 2）一样使用v-model，但不是直接在orderBy过滤器中使用该值，而是可以使用computed properties

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

您可以添加v-model指令

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

Answer 2

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

您需要在select标签中使用v-model指令作为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>

Answer 3

如果您要使用动态值循环并且不能使用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>

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

将所选值传递给vuejs函数

4 个答案: