在 VUE.JS 上使用带有 prop 的 v-model

Question

我正在尝试使用来自带有 v-model 的道具的数据，以下代码有效，但带有警告。

 <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>

警告说：

“避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具被改变：“值”

所以我改变了，现在我正在使用警告所说的数据。

 <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)
                    })
            }
        }
    }

所以现在代码不起作用，警告说：

“属性或方法“_value”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性“

知道如何修复第一个代码以抑制警告吗？ （或有关如何修复第二个代码的一些想法？）

观察：b-form-input 它不是我的组件，这是来自 Boostrap-Vue 的文本输入（ b-form-input 的文档）

原文由 user3142 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bert 解决了您的直接问题，但我认为您也应该知道您的方法有点偏离。由于最终您将新值发送到 postPost ，因此您实际上不需要修改本地副本。使用发送到 change 处理程序的 event 对象从输入中获取当前值。

而不是 v-model ，只需使用 :value ，并且在指定 change 处理程序时不要包含调用括号。

 <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>

原文由 Roy J 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

答案来自 https://github.com/vuejs/vue/issues/7434

道具是只读的，但您正尝试使用 v-model 更改其值。在这种情况下，如果您更改输入值，则不会修改 prop，并且该值会在下次更新时恢复。

请改用数据属性或计算设置器：

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

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

原文由 Sarvar N 发布，翻译遵循 CC BY-SA 4.0 许可协议