如何 Vue 让输入值 v-model 与 v-bind:value 操作

Posted 2023-02-22

【中文标题】如何 Vue 让输入值 v-model 与 v-bind:value 操作

【英文标题】：How to Vue let input value v-model with v-bind:value operation

【发布时间】：2020-08-19 17:24:39

【问题描述】：

像下面的代码我希望设置input2 v-model绑定data-value2，并且值是从value1 * 2开始操作的，但是它不起作用并抛出错误：

[Vue 警告]：编译模板时出错： v-bind:value="value1*2" 在同一元素上与 v-model 冲突，因为后者已经在内部扩展为值绑定

<div id="app">
  <input id="input1" type="number" v-model="value1">
  <input id="input2" type="number" v-model="value2" v-bind:value="value1*2">
</div>

<script>
var myObject = new Vue(
  el: '#app',
  data: 
    value1: 1,
    value2: 1
  
)
</script>

我尝试过的：

我可以创建一个 onchange 方法来做到这一点，但它需要重复添加v-on:change="operateValue" 代码来输入。

<div id="app">
  <input type="number" v-model="value1" v-on:change="operateValue">
  <input type="number" v-model="value2" v-on:change="operateValue">
  <input type="number" v-model="value3">
</div>

<script>
var app = new Vue(
  el: '#app',
  data: 
    value1: 1,
    value2: 1,
    value3 : 1
  ,
  methods:
    operateValue:function()
        app.$data.value3 = (app.$data.value1 * 1 + app.$data.value2 * 1 ) * 2;
    
  
)
</script>

有可能吗？或者我已经创建了一个自定义操作的方法？

【问题讨论】：

我已经尝试过了，它给了我一个错误

@PhilipF。是的，它会抛出错误，但我的预期是这样的。

你需要将 prop 绑定到一个对象，而不是一个表达式。

请使用计算属性

@halfer 谢谢，我会改正我的坏习惯。

【参考方案1】：

你不能在同一个元素上使用 v-model 和 v-bind:value，因为它会给你一个错误。

但是，您可以使用计算属性：

var myObject = new Vue(
    el: '#app',
    data: 
        value1: 1
    ,
    computed: 
        value2: function() 
            return this.value1 * 2;
        
    
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <input id="input1" type="number" v-model="value1">
    <input id="input2" type="number" v-bind:value="value2">
    </div>

您还可以使用以下方法访问“value2”：

console.log(myObject.value2);

更多信息请参考https://vuejs.org/v2/guide/computed.html

【参考方案2】：

你不能这样做，因为 v-model 只是 :value="someVar" and@update="setSomeVar"` 的简写，你可以做的是拆分它们，那么你应该没有问题。

所以只要写上类似的东西：

<input id="input1" type="number" v-model="value1" @input="value2 = $event*2">
<input id="input2" type="number" :value="value2">