[Vuejs]-VueJS: Is it really bad to mutate a prop directly even if I want it to ovewrite its value everytime it re-renders?

by

2👍

A solution would be to assign the message you are passing as a prop to a variable in data and set this variable to the v-model instead.

<template>
    <div>
        <input v-model="message"></input>
        <button @click="send">Send</button>
    </div>
</template>

<script>
    export default {
        data(){
       return{ message:this.msg
              }
       },
        props: {
            msg: {
                type: String,
                default: ''
            }
        },
        methods: {
            send() { use a bus to send yout message to other component }
        }
    }
</script>
👤Amine Mchayaa

1👍

If you are not passing the data to another component or from a component, you shouldn’t be using props, you should use Vue’s data object and data binding. This is for any component data that stays within itself, the component’s local state. This can be mutated by you as well so for our example I would do something like:

export default {
    data: function ()  {
        return {
             message: '',
        }
    },
    methods: {
        send() { 
            // insert some nice sending logic here
            // when done reset the data field
            this.data.message = '';
         }
    }
}


<template>
    <div>
        <input>{{ message }}</input>
        <button @click="send">Send</button>
    </div>
</template>

More info on props vs data with Vue

👤ngIf_happy

Leave a comment