时间戳

首页 > 解决方案 > 为什么在使用 NumericTextField 时会出现“避免直接更改道具”？

vue.js - 为什么在使用 NumericTextField 时会出现“避免直接更改道具”？

问题描述

我在 VueJS 中创建了一个简单的视图组件，但遇到了一个非常常见的错误：

void 直接改变一个 prop，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。道具被变异：“价值”

这是我的代码：

<template>
    <numeric-text-field class="mx-auto" label="Head Mass" units="kg" v-model="turbine.head_mass" />
</template>

<script>
import NumericTextField from '@/components/common/NumericTextField'
export default {
  name: 'Turbines',
  components: {
    NumericTextField
  },
  data () {
    return {
      turbine: {}
    }
  }
}
</script>

<style scoped>
</style>

奇怪的是，我收到修改“值”的错误，但我的代码中没有值。我认为这是由数字文本字段创建的间接层引起的。当我仅使用普通输入文本时，我的代码中不存在此问题。这里发生了什么？除了 v-model 之外，我应该以另一种特殊方式将模型连接到我的数字文本字段吗？

标签： vue.jsvuexvuetify.js

解决方案

事实证明，在原始发布时我不知道这是在 NumericTextField 中发布的。我认为这是一个标准的 Vueify 组件，但被同事添加了。正如原始帖子的评论所指出的那样，它没有正确处理双向输入。

诀窍是从 @input 中的 NumericTextField 组件添加 this.$emit('input', value) ，就像 Ohgodwhy 建议的那样。

推荐阅读