Vue.js How to mirror input field with v-model and computed property and a checkbox

I am trying to figure out how to properly mirror two input fields and dynamically change them based on a checkbox value. This is the best what I can think of using computed property with get and set features.
The problem is when the user types (1)”ABC” in shipping details, (2)unchecks (copy_chekcbox=false), (3)types “123” in billing details, and (4)checks back (copy_chekcbox=true) (5)the billing details doesn’t revert to shipping details, which is what I need.
Image with steps

Also, is there any shorter and more optimal way to mirror two fields and change their values based on checkbox value?

Thank you in advance.

<!DOCTYPE html>
<html>

<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="app">

    <p>Shipping details</p>
    <input v-model="shipping" type="text" />

    <p>Same as shipping: <input type="checkbox" v-model="copy_chekcbox" /></p>

    <p>Billing details</p>
    <input v-model="billing" type="text" :disabled="copy_chekcbox" />

  </div>

  <script>
    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
            }
          },
        },
      }
    })
  </script>
</body>

</html>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In my opinion I think the easiest way is use two inputs with v-if:

<p>Shipping details</p>
<input v-model="shipping" type="text">

<p>Same as shipping: <input type="checkbox" v-model="copy_chekcbox"></p>

<p>Billing details</p>

<template v-if="copy_chekcbox">
  <input v-model="shipping" type="text">
<template>
<template v-else>
  <input v-model="billing" type="text">
</template>

The main advantage of this method is that your JavaScript code remains simple.

Method 2

try this:

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

it should rerun the computed function for your billing data when you change copy_checkbox and thus update your billing_data.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating