Блог

Я пытаюсь понять, как правильно отразить два поля ввода и динамически изменять их в зависимости от значения флажка. Это лучшее, что я могу придумать, используя вычисляемое свойство с функциями get и set. Проблема заключается в том, что пользователь вводит (1)»ABC» в деталях доставки, (2)снимает галочки (copy_chekcbox=false), (3)вводит «123» в деталях выставления счетов и (4)проверяет (copy_chekcbox=true) (5)сведения о выставлении счетов не возвращаются к деталям доставки, что мне нужно. Изображение с шагами

Кроме того, существует ли более короткий и оптимальный способ зеркального отображения двух полей и изменения их значений на основе значения флажка?

Заранее спасибо.

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;My first Vue applt;/titlegt;  lt;script src="https://unpkg.com/vue"gt;lt;/scriptgt; lt;/headgt;  lt;bodygt;  lt;div id="app"gt;   lt;pgt;Shipping detailslt;/pgt;  lt;input v-model="shipping" type="text" /gt;   lt;pgt;Same as shipping: lt;input type="checkbox" v-model="copy_chekcbox" /gt;lt;/pgt;   lt;pgt;Billing detailslt;/pgt;  lt;input v-model="billing" type="text" :disabled="copy_chekcbox" /gt;   lt;/divgt;   lt;scriptgt;  var app = new Vue({  el: '#app',  data: {  shipping_data: '',  billing_data: '',  copy_chekcbox: true,  },  computed: {  shipping: {  get: function() {  return this.shipping_data  },  set: function(newValue) {  if (!this.copy_chekcbox) {  this.shipping_data = newValue  } else {  this.billing_data = newValue  this.shipping_data = newValue  }  },  },  billing: {  get: function() {  return this.billing_data  },  set: function(newValue) {  if (!this.copy_chekcbox) {  this.billing_data = newValue  } else {  this.billing_data = this.shipping_data  }  },  },  }  })  lt;/scriptgt; lt;/bodygt;  lt;/htmlgt; 

На мой взгляд, я думаю, что самый простой способ-использовать два входа с v-if:

 lt;pgt;Shipping detailslt;/pgt; lt;input v-model="shipping" type="text"gt;  lt;pgt;Same as shipping: lt;input type="checkbox" v-model="copy_chekcbox"gt;lt;/pgt;  lt;pgt;Billing detailslt;/pgt;  lt;template v-if="copy_chekcbox"gt;  lt;input v-model="shipping" type="text"gt; lt;templategt; lt;template v-elsegt;  lt;input v-model="billing" type="text"gt; lt;/templategt;  

Главное преимущество этого метода заключается в том, что ваш код JavaScript остается простым.

попробуйте это:

 billing: {  get: function() {  return this.copy_checkbox ? this.shipping_data : this.billing_data  },  

он должен повторно запустить вычисляемую функцию для ваших платежных данных, когда вы измените поле copy_checkbox и, таким образом, обновите свои данные billing_data.