VueJS : 두 양식의 양식 값 교환

두 가지 주소 양식이 거의 비슷한 한 가지 양식에 Same as Billing이라는 확인란이 있고 다른 양식에 Same as Shipping이라는 두 개의 양식 중 하나를 채우는 경우 확인란이 있습니다. 해당 형식의 값은 다른 형식으로 전송됩니다.VueJS : 두 양식의 양식 값 교환

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하고 그것을 사랑합니다. 도와 주셔서 감사합니다.

출처

2016-08-09 dev02

나는 당신의 행동을 완전히 해결하지 못했지만 v- 모델 바인딩을 동적으로 업데이트하고 싶지는 않다고 생각합니다. viewmodel에 양식 입력을 바인드하고 viewmodel 데이터가 변경되면 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>

출처

2016-08-09 22:05:51 Will

감사하지만 난 형태로 각 필드에 꽤 조건을 작성해야하기 때문에 최적화되지 수 있습니다 :이 같은 입력 태그 자체에 옮겼습니다. 어쨌든 고마워 – dev02

흥미로운 문제는 존재. 나는 당신의 솔루션이 왜 작동하지 않는지를 결정하는데 어려움을 겪고있다. 내 생각에 vueJS는 v- 모델에서 조건문을 갖는 것에 만족하지 않는다. 예를 들어, v 모델에 조건문을 포함하는 배열을 지정하면 (아래처럼) $ 데이터에 이상한 데이터가 표시됩니다.

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

그러나 문제의 해결 방법을 찾았습니다. 즉 v-model 부분에서 조건문을 피하는 것입니다. 이 지금은 작동

<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

출처

2016-08-09 22:06:35 David

VueJS : 두 양식의 양식 값 교환

답변

관련 문제