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

Question

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

例子 ：

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

由于某种原因，我无法使其工作。

谢谢你。

原文由 greenymaster69 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 greenymaster69 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议