避免在 Nuxt VueJs 中直接改变 props

Question

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

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

当我尝试在其中一个文本字段中书写时，我收到了避免改变道具的错误，我不确定我是否理解是什么导致了这种情况。我不希望出现此错误并在此处进行最佳实践。有什么建议？

Answer 1

问题

将 prop 传递给组件时：它将作为 READ ONLY prop 传递。

每当父组件更改此道具时，它也会在子组件中更改。

但是，当您尝试从子组件更改此道具时，您将收到此错误。

使用v-model这意味着您可以（读写）此属性。

解决方案

要解决此问题，您可以查看vue.js 文档中的Customizing Component v-model

v-model基本上是@input事件和:value

所以我们的想法是将您的属性包装到一个对象中并使用 v-model

并且在子组件中，您可以添加一个自定义v-model事件，该事件将在其中一个属性的每次更改中触发

检查这个工作演示：