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

新手上路,请多包涵

我正在尝试使用来自带有 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 许可协议

阅读 442
2 个回答

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 许可协议

答案来自 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题