반응형
상태를 사용하여 형식을 바인딩하는 동안 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
반응형
'IT이야기' 카테고리의 다른 글
vue 라우터가 쿼리 매개 변수를 변경할 때 맨 위로 스크롤 방지 (0) | 2022.06.21 |
---|---|
Vue 캔버스 구성 요소를 JS 개체에서 분리하는 중 (0) | 2022.06.21 |
GSON이 "BEGIN_OBJECT 예상했는데 BEGIN_ARRAY였나요?"를 던지는 경우 (0) | 2022.06.21 |
모키토를 사용할 때 조롱하는 것과 스파이하는 것의 차이점은 무엇입니까? (0) | 2022.06.21 |
Java를 사용하여 현재 시스템의 IP 주소 가져오기 (0) | 2022.06.21 |