避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。带 v 形答案

【问题标题】：getting Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. with v-form避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。带 v 形
【发布时间】：2021-08-12 14:43:44
【问题描述】：

我正在使用 nuxt 构建一个应用程序（使用 vuetify 2.x）。并不断收到此错误

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

我想要做什么： 根据子组件表单上的“有效”值禁用父组件上的提交按钮。

这是我的部分代码：

父.vue

<template>
....
    <v-stepper-items>
      <v-stepper-content step="1">
        <ChildComponent :somedata="somedata" :valid="isFormValid" @onChange="update" />
        <v-btn color="primary" @click="dosomething" :disabled="!isFormValid"> submit </v-btn>
      </v-stepper-content>
    </v-stepper-items>
...

</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  components: {
    ChildComponent,
  },
  data() {
    return {
      isFormValid: false,
      step: 1,
      somedata: {}
    };
  },
  methods: {
    update(val: boolean) {
      this.isFormValid = val;
    }
  },
});
</script>

childComponent.vue

<template>
  <v-container>
    <v-card flat>
      <v-card-text>
        <v-form v-model="valid" @change="onChange" class="pa-3">
          <v-text-field v-model="somedata.aaa" label="a" :rules="[rules.required]" />
          <v-text-field v-model="somedata.bbb" label="b" :rules="[rules.required]" />
        </v-form>
      </v-card-text>
    </v-card>
  </v-container>
</template>


<script lang="ts">
import Vue, {PropType} from 'vue';

export default Vue.extend({
  props: {
    somedata: {
      type: Object,
      default: {},
    },
    valid: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {
        required: (value: any) => !!value || 'required',
      },
    };
  },
  methods: {
    onChange() {
      this.$emit("onChange", this.valid);
    }
  }
});
</script>

我知道当子组件直接改变 prop 值时会出现此错误，但这就是我在 v-form 上添加 onChange 并将值发送到父组件的原因。但是还是不行。

谁能看出我做错了什么？

【问题讨论】：

v-model="valid" 仍在将@input 事件绑定到道具。改为:value="valid"

标签： typescript vue.js nuxt.js vuetify.js

【解决方案1】：

据我所知，问题是由于 childComponent 中的v-model="valid"。由于valid是绑定到模型上的，所以需要随意修改，但是因为是props值，所以不能直接修改。

我的建议是自定义 childComponent 以具有 v-model。所以我们可以像这样在父组件中使用childComponent

<ChildComponent :somedata="somedata" v-model="isFormValid" />

【讨论】：

【解决方案2】：

创建一个单独的子数据元素进行绑定，并用prop初始化：

export default Vue.extend({
  props: {
    somedata: {
      type: Object,
      default: {},
    },
    valid: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rules: {
        required: (value: any) => !!value || 'required',
      },
      somedataCopy: this.someData
    };
  },

并更新模板 v-model：

<template>
  <v-container>
    <v-card flat>
      <v-card-text>
        <v-form v-model="valid" @change="onChange" class="pa-3">
          <v-text-field v-model="somedataCopy.aaa" label="a" :rules="[rules.required]" />
          <v-text-field v-model="somedataCopy.bbb" label="b" :rules="[rules.required]" />
        </v-form>
      </v-card-text>
    </v-card>
  </v-container>
</template>

【讨论】：