Using v-model with a prop on VUE.JS

Question

I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning.

<template>
<div>
       <b-form-input v-model="value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';
    export default {
        props: {
            value: String
        },
        methods: {
            postPost() {
                axios.put('/trajectory/inclination', {
                    body: this.value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }
</script>

The warning says:

"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

So I changed and now I'm using a data as the warning says.

<template>
<div>
       <b-form-input v-model="_value" @change="postPost()"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';

    export default {
        props: {
            value: String
        },
        data() {
            return {
                _value: this.value
            }
        },
        methods: {
            postPost() {
                axios.put('/trajectory/inclination', {
                    body: this._value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }

So now the code it's not working and the warning says:

"Property or method "_value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"

Any idea how to fix the first code to suppress the warning? (or some idea on how to fix the second code?)

Obs.: b-form-input it's not my componente, this is the Textual Input from Boostrap-Vue (Doc for b-form-input)

tony19 · Accepted Answer · 2022-07-15 01:22:31Z

46

Answer is from https://github.com/vuejs/vue/issues/7434

Props are read-only, but you are trying to change its value with v-model. In this case, if you change the input value, the prop is not modified and the value is restored on the next update.

Use a data property or a computed setter instead:

computed: {
  propModel: {
    get () { return this.prop },
    set (value) { this.$emit('update:prop', value) },
  },
},

https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

edited Jul 15, 2022 at 1:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 6, 2018 at 9:58

Sarvar Nishonboyev

13.2k11 gold badges80 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

geoidesic Over a year ago

Also didn't Vue2 say that best practise one shouldn't be using $emit?

Phil Over a year ago

what an awful reply, just copy-pase from a github issue. how to use this in a class-based component? what is a data property?

aProgger Over a year ago

@Phil for using computed in class component look at the docs

Roy J · Accepted Answer · 2017-09-11 22:13:48Z

27

Bert addresses your direct issue, but I think you should also know that your approach is a bit off. Since ultimately you are sending the new value to postPost, you don't really need to modify your local copy. Use the event object that is sent to the change handler to get the current value from the input.

Instead of v-model, just use :value, and don't include the invocation parentheses when specifying the change handler.

<template>
<div>
       <b-form-input :value="value" @change="postPost"></b-form-input>
</div>
</template>
<script>
    import axios from 'axios';
    export default {
        props: {
            value: String
        },
        methods: {
            postPost(event) {
                axios.put('/trajectory/inclination', {
                    body: event.target.value
                })
                    .then(response => {
                    })
                    .catch(e => {
                        this.errors.push(e)
                    })
            }
        }
    }
</script>

answered Sep 11, 2017 at 22:13

Roy J

44k10 gold badges84 silver badges106 bronze badges

3 Comments

user3142 Over a year ago

Thank you for your help, I think your approach is a good one for getting the modified value. I would like to add something that I found If someone wants to change the value from the "prop" (like a two-way binding) the correct approach will be using the modifier sync link and not the v-model

Roy J Over a year ago

.sync is very similar to v-model for components. You can use either one. v-model is specifically for value props, while .sync can be used with a prop of any name.

Marco Over a year ago

To help anybody, I was facing the same issue. I just changed my var that was inside v-model="" from props array to data.

Abdullah · Accepted Answer · 2019-08-06 15:37:22Z

11

One general workaround is to introduce a data-variable and watch the props to update-variable. This is quite subtle and so easy to get wrong so here's an example with a Vuetify modal using v-model (the same technique, in theory, should work with <input> and others):

<template>
  <v-dialog v-model="isVisible" max-width="500px" persistent>
  </v-dialog>
</template>

<script>
export default {
  name: 'Blablabla',
  props: {
    visible: { type: Boolean, required: true }
  },
  data() {
    isVisible: false
  },
  watch: {
    // `visible(value) => this.isVisible = value` could work too
    visible() {
      this.isVisible = this.$props.visible
    }
  }
}
</script>

answered Aug 6, 2019 at 15:37

Abdullah

7917 silver badges6 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 20:21:09Z

10

_ prefixed properties are reserved for Vue's internal properties.

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods.

Try changing _value to something that doesn't start with an underscore.

edited Jul 15, 2022 at 20:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 11, 2017 at 21:33

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

2 Comments

Bert Over a year ago

Thanks :) I found it in the API docs and added to the answer.

user3142 Over a year ago

Thank you for help Bert, changing the variable name makes it work like a charm. But as Roy mentioned in his answer maybe my approach using local variables was a bit off and as this question will be available for others maybe will be best for them to follow the other approach.

fredrivett · Accepted Answer · 2022-07-27 14:39:41Z

9

The official Vue docs shows how to use v-model on a custom component: https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

TL;DR:

You simply need to have a specifically named value prop, and emit an input event which the v-model when you instantiate the component maps for you.

More info on how this works on the link above.

<template>
  <input
    type="text"
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  name: "Input",
  props: {
    value: String,
  },
};
</script>

<Input v-model="searchText"></Input>

edited Jul 27, 2022 at 14:39

answered Dec 19, 2019 at 14:50

fredrivett

6,7223 gold badges48 silver badges57 bronze badges

Comments

Soupedenuit · Accepted Answer · 2020-08-03 20:48:27Z

Point your input v-model directive to a data property named value_ (or any other name not starting with prefixes _ or $ which are reserved by Vue). Set the data property's default value to null. Then, add a method getValue() which will set property value_ based on your value prop's value. Finally, call getValue() in Vue's created() lifecycle hook. Like so:

<template>
  <div>
    <b-form-input v-model="value_" @change="postPost()">
    </b-form-input>
  </div>
</template>

<script>
  import axios from 'axios';
  
  export default {
    data: () => ({
      value_: null
    }),
    props: {
      value: String
    },
    methods: {
      postPost() {
        axios.put('/trajectory/inclination', {
          body: this.value_
        })
        .then(response => {
        })
        .catch(e => {
          this.errors.push(e)
        })
      },
      getValue() {
        this.value_ = this.value;
      }
    },
    created() {
      this.getValue()
    }
  }
</script>

Maq · Accepted Answer · 2020-08-22 10:17:43Z

0

You can use a data like below.

<template>
  <input type="text" v-bind:value="value" v-on:input="dValue= $event.target.value" />
</template>
        
 <script>
 export default {
  props: ["value"],
  data: function () {
    return {
      dValue: this.value,
    };
  },
  methods: {
    alertValue() {
     alert("Current Value" + this.dValue);
    },
  },
};
</script>

answered Aug 22, 2020 at 10:17

Maq

1862 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using v-model with a prop on VUE.JS

7 Answers 7

3 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related