Question

所以我正在开发一个应用程序，其中两个地址表单几乎相似，并且在一个表单上有一个名为Same as Billing的复选框，在另一个表单上有Same as Shipping，所以如果它们填写两个表单中的任何一个，该表格的价值转移到另一个。

这很好用，当选中Same as Billing或Same as Shipping复选框时，另一个表单会填充另一个表单的值，反之亦然。但是，当我从任何这些绑定字段中键入并删除焦点时，它们的键入的值不会出现。

Here is by what I mean

因此，当您选中复选框时，您会注意到值已被交换，但是当您在其中一个文本框中键入某个值并移开焦点时，它们会被绑定值覆盖。

VueCode：

new Vue({
  el:'body',
  props: {
    sameAsBox1: false,
    sameAsBox2: false
  },
  data: {
    first: 'Box 1 Contents',
    second: 'Box 2 Contents'
  }
});

所以有人可以请指出我在这里做错了什么，或者可能是我的逻辑并不适合这个简单的任务（计费，运输示例），我是VueJS的新手并喜欢它。谢谢你的帮助。

Answer 1

我的行为完全没有完成，但我相信你不想动态更新v-model绑定。只需将表单输入绑定到viewmodel，并使用Vue的观察者在viewmodel数据更改时更新值。

＆＃13;

new Vue({
  el: 'body',
  props: {
    sameAsBox1: false,
    sameAsBox2: false
  },
  data: {
    first: 'Box 1 Contents',
    second: 'Box 2 Contents'
  },
  watch: {
    first: function() {
      if (this.sameAsBox1) this.second = this.first;
    },
    second: function() {
      if (this.sameAsBox2) this.first = this.second;
    },
    sameAsBox1: function(val) {
      if (val) this.second = this.first;
    },
    sameAsBox2: function(val) {
      if (val) this.first = this.second;
    }
  }
});

＆＃13;

.box {
  border: 1px solid black;
  background-color: #f0f0f0;
  margin: 10px;
  padding: 10px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />{{$data | json}}
<hr>

<div class="pull-left box">
  Box 1
  <input class="form-control" type="text" v-model="first">
  <input type="checkbox" v-model="sameAsBox2">Same As Box 2
</div>

<div class="pull-right box">
  Box 2
  <input class="form-control" type="text" v-model="second">
  <input type="checkbox" v-model="sameAsBox1">Same As Box 1
</div>

＆＃13;

Answer 2

你提出的有趣问题。我也无法确定您的解决方案无法正常工作的原因。我的猜测是vueJS对v模型中的条件语句不满意。例如，如果为v-model提供包含条件语句的数组（如下所示），则会在$ data中显示一些奇怪的数据。

<input class="form-control" type="text" v-model="[sameAsBox2 ? second: first]">

但是，我确实找到了问题的解决方法。即通过避免v模型部分中的条件语句。我将它移动到输入标签本身，如下所示：

<input class="form-control" v-if="sameAsBox2" type="text" v-model="second">
<input class="form-control" v-else type="text" v-model="first">

See the jsfiddle

VueJS：交换两种形式的表格值

2 个答案: