Updating several inputs programmatically in VueJSLet's explore how to

Question

Updating several inputs programmatically in VueJSLet's explore how to

I am working on a form that requires updating multiple other fields when one field is updated. For instance, I have a contact name field and depending on the name entered, I need to update the email and phone number fields as well.

<template>
  <custom-input :value="contact.name" @input="event => contact.name = event.target.value" />
  <custom-input :value="contact.phone" @input="event => contact.phone = event.target.value" />
  <custom-input :value="contact.email" @input="event => contact.email = event.target.value" /> 
</template>

<script>
...
props: {
  contact: {
    type: Object,
    required: true
  }
},
watch: 
  "contact.name": function(value) {
    if (this.contact.name === "john") {
      this.contact.email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="244e4b4c4a644149454d480a474b49">[email protected]</a>"
      this.contact.phone = "1111111111"
    } else if (this.contact.name === "ed") {
      this.contact.email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0b0a2e0b030f0702400d0103">[email protected]</a>"
      this.contact.phone = "2222222222"  
    }
  }
}

...
</script>

It appears that Vue dislikes this approach because it segregates the DOM from the data model. Initially, I thought about using $refs, but those are only readable. What would be the correct method for accomplishing this task?

Another idea I had was to assign computed properties to the values of name and phone. However, this causes an issue since it will not trigger any changes in the parent component's form.

This problem may also stem from my misunderstanding of "two-way" binding. I always believed that the form represents one direction while the data within the component's script serves as the other, which is evidently not the case. So, what is the alternative?

A final consideration I have is emitting an event instead:

<template>
  <custom-input :value="contact.name" @input="event => contact.name = event.target.value" />
  <custom-input ref="phone" :value="contact.phone" @input="event => contact.phone = event.target.value" />
  <custom-input ref="email" :value="contact.email" @input="event => contact.email = event.target.value" /> 
</template>

<script>
...
props: {
  contact: {
    type: Object,
    required: true
  }
},
watch: 
  "contact.name": function(value) {
    if (this.contact.name === "john") {
       this.$refs.email.$emit("input", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bcb9beb896b3bb7bdbaf8b5bbb9">[email protected]</a>")
       this.$refs.phone.$emit("input", "111111111111")
    } else if (this.contact.name === "ed") {
       this.$refs.email.$emit("input", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284d4c684d45494144064b4745">[email protected]</a>")
       this.$refs.phone.$emit("input", "222222222222")
    }
  }
}

Unfortunately, this solution does not seem to work either. Quite disappointing.

Edit

Syntax errors fixed.

Edit 2

Demonstrated that input is actually a separate child component.

javascript vue.js frontend

Answer 1

Answer №1

I have observed that there is an attempt to alter the value of props in Vue, which is not allowed by the framework. It's important to maintain a one-way data flow in Vue where child components do not directly modify data passed as props from the parent. This helps in ensuring clarity and predictability in how data moves through the application. For more information on this topic, you can refer to the official documentation at: https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Vue provides the data property for each component, serving as a local private memory that can be modified within the component.

To address this issue, a common approach is to copy the data from props into the data property of the child component when it is mounted, allowing modifications to be made on the local data instead.

Below is an updated code example (also reflected in Codepen) demonstrating this concept:

Template:

<div id="app">
  <div>
    <my-form :contact="contact"></my-form>
  </div>
</div>

Javascript:

Vue.component('my-form', {
  data() {
    return { name: '', phone: '', email: '' }
  },
  props: {
    contact: { type: Object, required: true }
  },
  mounted() {
    this.name = this.contact.name;
    this.phone = this.contact.phone;
    this.email = this.contact.email;
  },
  template: `
    <div>
      <input v-model="name" />
      <input v-model="phone"/>
      <input v-model="email"/>
      <p>
        value of input: {{ JSON.stringify({ name, phone, email }) }}
      </p>
    </div>
  `,
    watch: {
      name(value) {
        if(value === 'john') {
           this.phone = '123456';
           this.email = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="235746505763444e424a4f0d404c4e">[email protected]</a>';
        }
      }
    }
});
new Vue({
  el: '#app',
  data() {
    return { contact: { name: 'initial name', phone: '123456', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6cfc8cfd2cfc7ca88c3cbc7cfcae6c1cbc7cfca88c5c9cb">[email protected]</a>' } }
  }
})

Check out the updated code pen for a hands-on demonstration: https://codepen.io/aptarmy/pen/PoqgpNJ

Answer 2

I have observed that there is an attempt to alter the value of props in Vue, which is not allowed by the framework. It's important to maintain a one-way data flow in Vue where child components do not directly modify data passed as props from the parent. This helps in ensuring clarity and predictability in how data moves through the application. For more information on this topic, you can refer to the official documentation at: https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Vue provides the data property for each component, serving as a local private memory that can be modified within the component.

To address this issue, a common approach is to copy the data from props into the data property of the child component when it is mounted, allowing modifications to be made on the local data instead.

Below is an updated code example (also reflected in Codepen) demonstrating this concept:

Template:

<div id="app">
  <div>
    <my-form :contact="contact"></my-form>
  </div>
</div>

Javascript:

Vue.component('my-form', {
  data() {
    return { name: '', phone: '', email: '' }
  },
  props: {
    contact: { type: Object, required: true }
  },
  mounted() {
    this.name = this.contact.name;
    this.phone = this.contact.phone;
    this.email = this.contact.email;
  },
  template: `
    <div>
      <input v-model="name" />
      <input v-model="phone"/>
      <input v-model="email"/>
      <p>
        value of input: {{ JSON.stringify({ name, phone, email }) }}
      </p>
    </div>
  `,
    watch: {
      name(value) {
        if(value === 'john') {
           this.phone = '123456';
           this.email = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="235746505763444e424a4f0d404c4e">[email protected]</a>';
        }
      }
    }
});
new Vue({
  el: '#app',
  data() {
    return { contact: { name: 'initial name', phone: '123456', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6cfc8cfd2cfc7ca88c3cbc7cfcae6c1cbc7cfca88c5c9cb">[email protected]</a>' } }
  }
})

Check out the updated code pen for a hands-on demonstration: https://codepen.io/aptarmy/pen/PoqgpNJ

Updating several inputs programmatically in VueJSLet's explore how to

Answer №1

Similar questions

How come I am unable to pass JavaScript values to my PHP5 code?

Issue encountered while trying to update field using dynamically created row

Acquire information from a JSON formatted string

Error: The parent class is not defined as an object

What is the process for determining the default character length in a <p> tag based on its height and width?

The negative z-index is causing issues with my ability to select classes using jQuery

When does an xmlHttpRequest object parse serialized XML into a DOM during its lifecycle?

Converting a local Node.js server to an online server: A step-by-step guide

Why does this code snippet throw an error if let is not hoisted or in the temporal dead zone? It could have simply used the global reference instead

Give it a little time before uploading a widget onto the page

Does vuetify offer a card footer or card deck feature in its designs?

Encountering an issue in Next.js when using getStaticProps: reading 'map' of undefined properties

Leveraging Enjoyhint within nextJS

Checking to see if the prop 'isChecked' has been modified

Display the contents of a <div> tag from one HTML file onto another HTML file

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

Obtain the URL for making an asynchronous request using PHP and SQL

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Create a feature in three.js that allows users to click on an object to display information about the