Sometimes, we want to pass props as initial data in Vue.js.

In this article, we’ll look at how to pass props as initial data in Vue.js.

How to pass props as initial data in Vue.js?

To pass props as initial data in Vue.js, we can set the prop value as an initial value of a reactive property.

For instance, we write

<script>
export default {
  //...
  props: {
    record: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      recordLocal: { ...this.record },
    };
  },
  //...
};
</script>

to set the recordLocal reactive property to a copy of the record prop as its initial value.

We register the record prop in the props property.

Conclusion

To pass props as initial data in Vue.js, we can set the prop value as an initial value of a reactive property.