将选定的值传递给 vuejs 函数答案

【问题标题】：Pass selected value to vuejs function将选定的值传递给 vuejs 函数
【发布时间】：2015-09-25 03:50:15
【问题描述】：

如何将选定的值传递给 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)
    }
  }

【问题讨论】：

标签： vue.js

【解决方案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);
    },
}

【讨论】：

非常感谢，我明天去办公室试试。我不使用 v-model 的原因是该值还包含排序方向，例如 asc 或 desc。如果我使用v-model，vue 将尝试根据不存在的title asc 属性对结果进行排序，所以我想将选定的值发送给一个函数，将其拆分并使用标题作为排序属性和 asc 或desc 作为方向。我希望我所说的有意义。谢谢。
好的，我想我明白了，我将编辑我的答案并添加其他可能的解决方案。
要补充一点，sortOrder 应该是布尔类型，true/false，所以我必须检查 sortOrder 是否等于 asc: return this.sorting.split(' ')[1] === 'asc' ? false : true 它不会接受除布尔值之外的其他值 3d过滤器中的参数。谢谢。
#2 对我来说效果很好，但我不得不改用 v-on:change="sortBy"
@user3089840 我编辑我的答案以使用当前事件语法。（可能有点晚了:)）

【解决方案2】：

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

【讨论】：

这正是我想要的。一种不传递整个事件的方法（正如 Vue 默认所做的那样），而只是传递值。这样我就可以与代码中没有事件的其他地方共享处理函数。

【解决方案3】：

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

您需要在选择标签中使用 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>

【讨论】：

【解决方案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);
}

【讨论】：