Nuxt VueJ에서 직접 소품 변환 방지

Nuxt VueJ에서 직접 소품 변환 방지

그래서 나는 이 문제에 대한 많은 게시물을 보고 있지만 왜 내가 여기서 잘못하고 있는지 머리를 싸매지 못한다.컴포넌트에 배치한 폼이 있습니다.대부분 vuetify를 사용한 텍스트 필드로 구성되어 있습니다.그리고 이 양식을 다른 곳에서 재사용하고 있습니다.여러 가지 시도를 해봤지만 여전히 오류가 발생합니다. 여기 내 컴포넌트가 있습니다.

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

컴포넌트 Import

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

텍스트 필드 중 하나에 쓰려고 하면 소품 변형을 피하는 오류가 발생하지만, 원인이 무엇인지 알 수 없습니다.이 오류를 방지하고 여기서 베스트 프랙티스를 수행합니다.좋은 의견이라도 있나?

문제

소품을 컴포넌트에 전달할 때: 소품은 읽기 전용 소품으로 전달됩니다.

부모 컴포넌트가 이 프로포넌트를 변경할 때마다 자녀 컴포넌트에서도 변경됩니다.

그러나 하위 구성 요소에서 이 소품을 변경하려고 하면 이 오류가 발생합니다.

사용할 때v-model이것은, 이 어트리뷰트를(읽고 쓸 수 있는) 것을 의미합니다.

솔루션

이 문제를 해결하려면 vue.js 설명서에서 구성 요소 v-model 사용자 지정을 확인하십시오.

v-model기본적으로는 사이의 조합입니다.@input이벤트 및:value

그래서 그 아이디어는 당신의 속성을 하나의 객체로 묶어서 전달하고v-model

자 컴포넌트에서 커스텀을 추가할 수 있습니다.v-model속성 중 하나를 변경할 때마다 트리거되는 이벤트

다음 작업 데모를 확인합니다.

언급URL : https://stackoverflow.com/questions/66730445/avoid-mutating-props-directly-in-a-nuxt-vuejs