Vue에서 양식 데이터를 올바르게 초기화하는 방법

Vue에서 양식 데이터를 올바르게 초기화하는 방법

그래서 양식을 렌더링하는 컴포넌트가 있고, 또한 Ajax 요청으로 받은 데이터로 필드를 미리 채우는 중이다.

나의 문제는 필드 편집뿐만 아니라 동시에 제출할 새 필드를 추가하기를 원하기 때문에 미리 채워진 데이터와 새로운 데이터를 동일한 오브젝트로 초기화하여 아약스 요청으로 제출하려고 한다.현재 설정된 양식 데이터는 양식이 렌더링되기 전에 필드를 지속적으로 채우지 않는다.

이것은 양식 템플릿이다.

<form @submit.prevent="editThisWorkflow" class="d-flex-column justify-content-center" >

 <div>
   <input type="text" v-model="workflowData.workflow">
    </div>
    <div >
    <div v-for="object in workflowData.statuses" :key="object.id">
    <input type="text" v-model="object.status">
    </div>
    <div v-for="(status, index) in workflowData.newStatuses" :key="index">
    <input type="text" placeholder="Add Status" v-model="status.value">
    <button type="button" @click="deleteField(index)">X</button>
    </div>
    <button type="button" @click="addField">
      New Status Field
    </button>
    </div>
    <div>
    <div>
    <button type="submit">Save</button>
    <router-link  :to="{ path: '/administrator/workflows'}" >Cancel</router-link>
  </div>
 </div>

</form>

이게 대본이야.

data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.workflow.statuses,
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
    computed: {
    ...mapGetters(['workflow']),
  },
  methods: {
    ...mapActions(['editWorkflow']),
    editThisWorkflow() {
        this.editWorkflow({
           id: this.workflowData.id,
           workflow: this.workflowData.workflow,
           statuses: this.workflowData.statuses,
           newStatuses: this.workflowData.newStatuses
        })
    },
    addField() {
        this.workflowData.newStatuses.push({ value: ''});
    },
    deleteField(index) {
        this.workflowData.newStatuses.splice(index, 1);
    }

그리고 이것은 데이터를 제출하는 저장 방법이다.

editWorkflow(context, workflowData) {
      axios.patch('/workflowstatuses/' + workflowData.id, {
        workflow: workflowData.workflow,
        statuses: workflowData.statuses,
        newStatuses: workflowData.newStatuses
      })
      .then(response => {
          context.commit('editWorkflow', response.data)
      })
      .catch(error => {
          console.log(error.response.data)
      })           
    },

내 문제가 여기에 들어 온다.

 data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.workflow.statuses,
                newStatuses: []
            },
            workflowLoaded: false
        }
    },

이 부분을 더 잘 설정할 수 있는 방법이 없을까?

workflowData: {
    id: this.$store.state.workflow.id,
    workflow: this.$store.state.workflow.workflow,
    statuses: this.$store.state.workflow.statuses,
    newStatuses: []
},

양식에 저장 값을 한 번만 할당하면 마운트된 기능을 사용할 수 있다.

mounted: function() {
   this.id = this.$store.state.workflow.id
   this.workflow = this.$store.state.workflow.workflow
   this.statuses = this.$store.state.workflow.statuses
},
data() {
      return {
          workflowData: {
              id: '',
              workflow: '',
              statuses: '',
              newStatuses: []
          },
          workflowLoaded: false
      }
 },

데이터 속성은 이것을 받아들이지 않는다. 나는 보통 이 질문에서 화살표 기능을 사용한다. 왜냐하면 그것은 내가 이것을 사용하는 것을 금지하기 때문이다. 그리고 나의 팀 또한 데이터 내에서 이것을 사용하는 것을 금지하기 때문이다.데이터토 내의 모든 필수 항목을 reactivity로 선언하고, 페이지 탑재 내 값을 할당한다.

mounted() {
   this.workflowData.id = this.$store.state.workflow.id
   this.workflowData.workflow = this.$store.state.workflow.workflow
   this.workflowData.statuses = this.$store.state.workflow.statuses
},

data: () => ({
   workflowData: {
                id: '',
                workflow: '',
                statuses: '',
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
})

내가 이 문제를 해결하는 방법은 여기 제시된 대부분의 해결책보다 간단했다.나는 데이터 전달이 어렵다는 것을 알았다.this.$store.state부에즈의 생애 주기 때문에그리고 값 할당 대상v-mode"v-model은 모든 양식 요소에서 발견된 초기 값, 확인됨 또는 선택된 속성을 무시하기 때문에 불가능한 것으로 조사됨. 그것은 언제나 부에 인스턴스 데이터를 진실의 원천으로 취급할 것이다."

해결책

ajax 요청에서 받은 데이터(예: 이메일 유형 입력 필드)로 필드를 미리 채우기 위해 다음과 같이 했다.

1. 응용 프로그램 저장소에 내 아약스 요청의 출력을 저장(쿠키)했다. 로컬 저장소 또는 세션이 될 수 있으며, 무엇이 적합한지에 따라 달라짐.

2번째. Vuex의 스토어(단일 출처)에 애플리케이션 스토리지의 데이터를 채웠다.나는 페이지를 다시 로드할 때마다 그것을 한다.

3번째. 데이터를 바인딩하는 대신v-modelVuejs 수명 주기 또는 html 입력의 값 속성 사용(<input type="email" value="email@example.com">). html의 자리 표시자 속성을 다음과 같이 Vuex 저장소에서 전송되는 데이터로 채워서 미리 입력:

<input v-model="form.input.email" type="email" name="email" v-bind:placeholder="store.state.user.data.email">

참조URL: https://stackoverflow.com/questions/53161903/how-to-properly-initialize-form-data-in-vue