VueJS：2つのフォームのフォーム値を入れ替える

Question

2つのアドレスフォームがほぼ同じで、1つのフォームにSame as Billingというチェックボックスがあり、別のフォームにSame as Shippingというチェックボックスがあるアプリで作業しています。そのフォームの値は別のものに移ります。

Same as BillingまたはSame as Shippingチェックボックスをオンにすると、もう1つのフォームに別のフォームの値が入力され、その逆の場合も同様です。ただし、これらのバインドフィールドのいずれかから入力してフォーカスを削除すると、型のの値は表示されません。あなたがチェックボックスをチェックするとき

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' 
    } 
}); 

だから、誰かがIAMのがここで間違っているものを指摘してくださいすることができますか、それは私のロジックは、この単純なタスク（請求書、出荷例）のためにすべてを適切ではない可能性があり、私は新しいですVueJSとそれを愛する。助けてくれてありがとう。

Answer 1

あなたの行動は完全には解決されませんが、私はあなたがvモデルのバインディングを動的に更新したくないと思います。フォーム入力をビューモデルにバインドし、ビューモデルのデータが変更されたときにVueのウォッチャーを使用して値を更新するだけです。

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; 
 
    } 
 
    } 
 
});

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

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

Answer 2

興味深い問題あなたが存在。あなたのソリューションがなぜ機能しないのかを判断するのも難しいです。私の推測では、vueJSはvモデルに条件文を持つことに満足していないということです。たとえば、vモデルに条件文を含む配列を渡すと（下のように）、$ 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