Using v-model with a prop on VUE.JS
![[愿得一人]](https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000012.jpg)
I\'m trying to use a data coming from a prop with v-model, the following code works, but with a warning.
-
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://vuejs.org/v2/guide/computed.html#Computed-Setter
讨论(0) -
For those still coming through to this, the official Vue docs shows how to use
v-modelon a custom component: https://vuejs.org/v2/guide/components.html#Using-v-model-on-ComponentsTL;DR:
You simply need to have a specifically named
valueprop, and emit aninputevent which thev-modelwhen 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>讨论(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>讨论(0) -
_ 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.
讨论(0) -
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 tonull. Then, add a methodgetValue()which will set propertyvalue_based on yourvalueprop's value. Finally, callgetValue()in Vue'screated()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>讨论(0) -
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 theeventobject that is sent to thechangehandler to get the current value from the input.Instead of
v-model, just use:value, and don't include the invocation parentheses when specifying thechangehandler.<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>讨论(0)
加载中...
- 热议问题