javascript - 避免在 Nuxt VueJs 中直接改变 Prop

Question

所以我看到很多关于这个问题的帖子，但我无法理解为什么我在这里做错了。我有一个放在组件中的表单。它主要由使用 vuetify 的 TextField 组成。然后我在其他地方重用这个表格。我尝试了不同的方法，但仍然出现错误，这是我的组件。

  <v-window continuous  v-model="step">
                  <v-window-item :value="1">
                      <v-form>
                        <v-container>
                          <v-row>
                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="First name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalFirstNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="Last name"
                                required
                                autocomplete="off"
                                clearable

                                v-model="modalLastNameValue"

                              ></v-text-field>
                            </v-col>

                            <v-col
                              cols="12"
                              md="4"
                            >
                              <v-text-field
                                label="E-mail"
                                required
                                autocomplete="off"
                                clearable
                                v-model="modalEmailValue"
                              ></v-text-field>
                            </v-col>
                        </v-container>
                      </v-form>
                  </v-window-item>
<script>
export default {
  props: {
    modalFirstNameValue: {
    },
    modalLastNameValue:{

    },
    modalEmailValue:{

    },
</script>

导入组件

<template>
      <div id="app">
        <FormModal
          v-show="isModalVisible"
          @close="closeModal"
          modalTitle="Book Appointment Form"
          v-bind:modalFirstNameValue="modalFirstNameValue"
          v-bind:modalFirstNameLabel="modalFirstNameLabel"
          v-bind:modalLastNameValue="modalLastNameValue"
          v-bind:modalLastNameLabel="modalLastNameLabel"
          v-bind:modalEmailValue="modalEmailValue"
          v-bind:modalEmailLabel="modalEmailLabel"
          />
      </div>
</template>

<script>
import FormModal from "~/components/FormModal";
export default {
  name: 'app',
  components: {
    FormModal,
  },

  data(){
    return{
      modalEmailLabel         : 'Email',
      modalEmailValue         : '',
      modalLastNameLabel      : 'Last Name',
      modalLastNameValue      : '',
      modalFirstNameLabel     : 'First Name',
    }
  }
}
</script>

当我尝试在其中一个文本字段中写入时，我得到了避免改变 Prop 的错误，不确定我是否理解导致这种情况的原因。我想没有这个错误并在这里做最佳实践。有什么建议么？

Answer 1

问题
将 prop 传递给组件时:它将作为 READ ONLY Prop 传递。
每当父组件更改此 Prop 时，它也会在子组件中更改。
但是，当您尝试从子组件更改此 Prop 时，您会收到此错误。
使用 v-model 时这意味着您可以(读写)此属性。
解决方案
要解决此问题，您可以查看 Customizing Component v-model在 vue.js 文档中v-model基本上是 @input 之间的组合事件和 :value所以想法是将您的属性包装到一个对象中并使用 v-model 传递它
在子组件中，您可以添加自定义 v-model将在属性之一的每次更改中触发的事件
查看this working demo :