IT이야기

상태를 사용하여 형식을 바인딩하는 동안 Nuxt JS에서 변환 오류를 가져오는 중

cyworld 2022. 6. 21. 23:03
반응형

상태를 사용하여 형식을 바인딩하는 동안 Nuxt JS에서 변환 오류를 가져오는 중

Nuxt JS의 vuex 스토어에 폼 필드를 바인딩하려고 합니다.일반 텍스트 필드에서는 정상적으로 동작합니다.get() set()computed그러나 수동으로 가져오고 설정하는 데 어려움을 겪고 있습니다.오브젝트를 템플릿에서 특정 포맷의 어레이에 푸시하여 저장하고 바인딩을 유지하려고 합니다.코드는 다음과 같습니다.

<template>
  <div class="container setting-form-area-business">
    <b-form-group v-for="(input, index) in phoneNumbers" :key="`phoneInput-${index}`">
      <label>Mobile Number {{index+1}}*</label>
      <b-input-group>
        <b-form-input v-model="input.phone" @input="updateStore" class="custom-form-input-business">
        </b-form-input>
        <b-input-group-append v-show="phoneNumbers.length > 1">
          <b-button class="mobile-number-remove-btn" @click="removeField(index, phoneNumbers)"></b-button>
        </b-input-group-append>

      </b-input-group>

    </b-form-group>

    <b-form-group>

      <b-button class="jh-btn2" @click="addField">Add More Mobile Number</b-button>

    </b-form-group>

  </div>
</template>
<script>
  export default {
    props: [
      'visited'
    ],

    data() {
      return {
        phoneNumbers: this.$store.state.business.formvalue.mobileNumber.length ? this.$store.state.business.formvalue
          .mobileNumber : [{
            phone: ""
          }],


      }
    },
    computed: {
      mobilenumbers() {
        return this.$store.state.business.formvalue.mobileNumber
      },

    },
    methods: {

      addField() {
        this.phoneNumbers.push({
          value: ""
        });

      },
      removeField(index, fieldType) {

        fieldType.splice(index, 1);
        console.log('fieldType', fieldType);
        this.emitErrorStatus();
      },
      updateStore() {
        this.$store.commit('business/setformmobileNumber', {
          mobileNumber: this.phoneNumbers
        })
      }
    },
  }

</script>

이것은 내가 vue에 있을 때 잘 작동했지만, nuxt에 와서는 오류가 발생하고 있다.

[vuex]는 변환 핸들러 외부의 vuex 스토어 상태를 변환하지 않습니다.

에러에서 알 수 있듯이, 스테이트를 변환하지 말아 주세요.이것은 몇 가지 방법으로 해결할 수 있습니다.여기서 빠르게 검색하면 많은 답을 얻을 수 있습니다.

이것은 제 것입니다(Lodash의 것을 사용).cloneDeep): https://stackoverflow.com/a/66262659/8816585

언급URL : https://stackoverflow.com/questions/67954287/getting-mutation-error-in-nuxt-js-while-binding-form-with-state

반응형