使用 Vue.js 将方法结果绑定到 v-model答案

【问题标题】：Binding method result to v-model with Vue.js使用 Vue.js 将方法结果绑定到 v-model
【发布时间】：2016-05-14 15:33:23
【问题描述】：

如何使用 Vue.js 将方法结果绑定到 v-model？

示例：

<someTag v-model="method_name(data_attribute)"></someTag>

由于某种原因，我无法让它工作。

谢谢。

【问题讨论】：

为此使用计算值。
这不起作用，因为我无法将参数传递给计算属性，我希望使用我传递的属性来评估模型。编辑：我会尝试把东西分成组件
如果您可以发布一个不那么模糊的示例，也许我们可以提供更多帮助。我不清楚你为什么要这样做。
@greenymaster69 你能解决这个问题吗？
您可以将组件包装在另一个组件中，并将 data_attributes 作为 prop 传递，并使用计算的 set/get 策略，如下所述。

标签： vue.js

【解决方案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() 时需要参数，使其工作似乎非常复杂。我的示例是一个中等大小的动态对象列表，它填充了一个复杂的输入列表，所以：

我不能轻易地在子元素上放置手表，除非我用深度观察整个父列表，但它需要更复杂的函数来确定哪些内部道具和/或列表发生了变化并从那里做什么
我不能直接使用带有 v-model 的方法，因为它可以提供“get(param)”方法（可以这么说），但它没有“set()”方法李>
计算属性的拆分也有同样的问题，但相反，有一个“set()”但没有一个“get(param)”

【讨论】：