使用 Vue.js 将方法结果绑定到 v-model
Posted
技术标签:
【中文标题】使用 Vue.js 将方法结果绑定到 v-model【英文标题】:Binding method result to v-model with Vue.js 【发布时间】:2016-05-14 15:33:23 【问题描述】:如何?
示例:
<someTag v-model="method_name(data_attribute)"></someTag>
由于某种原因,我无法让它工作。
谢谢。
【问题讨论】:
为此使用计算值。 这不起作用,因为我无法将参数传递给计算属性,我希望使用我传递的属性来评估模型。编辑:我会尝试把东西分成组件 如果您可以发布一个不那么模糊的示例,也许我们可以提供更多帮助。我不清楚你为什么要这样做。 @greenymaster69 你能解决这个问题吗? 您可以将组件包装在另一个组件中,并将 data_attributes 作为 prop 传递,并使用计算的 set/get 策略,如下所述。 【参考方案1】:多年后,有了更多经验,我发现绑定:value
比使用v-model 更容易。然后您可以通过捕获@change
来处理更新。
编辑(根据请求):
<input :value="myValue" @change="updateMyValue">
...
methods:
updateMyValue (event)
myValue = event.target.value.trim() // Formatting example
在子组件中:
// ChildComponent.vue
<template>
<button
v-for="i in [1,2,3]">
@click="$emit('change', i) />
</template>
// ParentComponent.vue
<template>
<child-component @change="updateMyValue" />
</template>
<script>
import ChildComponent from './child-component'
export default
components:
ChildComponent
,
data ()
return
myvalue: 0
,
methods:
updateMyValue (newValue)
this.myvalue = newValue
</script>
【讨论】:
再有几年经验,您可能会学会添加代码块来显示您在说什么 好的!我添加了一个简单的例子。如果需要,可以添加更多。【参考方案2】:v-model
表达式必须具有 get
和 set
函数。对于大多数变量,这非常简单,但您也可以使用计算属性自己定义它们,如下所示:
data:function()
return value: 5
,
computed:
doubleValue:
get()
//this function will determine what is displayed in the input
return this.value*2;
,
set(newVal)
//this function will run whenever the input changes
this.value = newVal/2;
那么你可以使用<input v-model="doubleValue"></input>
如果您只想让标签显示方法结果,请使用<tag>method_name(data_attribute)</tag>
【讨论】:
【参考方案3】:同意 :value 和 @change 组合 greenymaster
。
即使我们在 get/set 中拆分计算属性,这很有帮助,但如果在调用 get() 时需要参数,使其工作似乎非常复杂。
我的示例是一个中等大小的动态对象列表,它填充了一个复杂的输入列表,所以:
【讨论】:
以上是关于使用 Vue.js 将方法结果绑定到 v-model的主要内容,如果未能解决你的问题,请参考以下文章