Vue Answers

How to put a value of data object in another data object with Vue.js?

Spread the love

To put a value from one data object into another data object in Vue.js, you can simply assign the value from one data property to another property within the component’s methods or lifecycle hooks.

Here’s a basic example:

    <p>Original Value: {{ originalValue }}</p>
    <p>Copied Value: {{ copiedValue }}</p>
    <button @click="copyValue">Copy Value</button>

export default {
  data() {
    return {
      originalValue: 'Hello, Vue!', // Original value
      copiedValue: '' // Placeholder for the copied value
  methods: {
    copyValue() {
      // Copy the value from originalValue to copiedValue
      this.copiedValue = this.originalValue;

In this example, we have two data properties: originalValue and copiedValue.

Initially, originalValue is set to 'Hello, Vue!', and copiedValue is empty.

When the button is clicked, the copyValue method is called.

Inside the copyValue method, we assign the value of originalValue to copiedValue, effectively copying the value from one data property to another.

You can adjust this pattern to suit your specific use case, such as copying values from computed properties, props, or any other data sources within your Vue component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *