Vuex를 사용하여 양식 입력 데이터를 변경할 수 없음

Vuex를 사용하여 양식 입력 데이터를 변경할 수 없음

vuex가 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않음

에러가 자주 나기 때문에 여기서 뭔가 찾아보려고 했는데, 아직 해결이 안 되더라고요.

vuex를 사용하여 상태 저장 양식을 생성하려고 합니다.

요소

<el-form ref="form" :model="form" label-width="130px">


   <el-form-item label="Entrada">
       <el-input v-model="form.dataEntrada"></el-input>
   </el-form-item>


</el-form>

계산 완료

computed: {
        form: {
            get () {
                return this.$store.state.form
            },
            set (value) {
                this.$store.commit('setForm', value)
            }
        }
    }

가게

state: {
    form: {
      dataEntrada: ''   
    },
    
},

mutations: {
    setForm(state, payload){
        state.form = payload
    }
}

actions: {},

getters: {},

맵을 작성하려고 합니다.v-modelVuex의 한 조각에state대신 을 사용합니다.@input또는@change스토어에 변경을 커밋하고 사용하기 위한 입력 정보:value스토어에서 값을 바인딩합니다.

<el-input :value="form.dataEntrada" @input="updateValue" />

그리고 대본에

computed: { form: function() {  return this.$store.state.form }},

methods: { updateValue: function(e) { this.$store.commit('setValue', e.target.value) }}

갱신하다

템플릿

<template>
<div class="hello">
<el-form ref="form" :model="form" label-width="130px">
  <el-row>
    <el-col :span="4">
      <el-form-item label="Entrada">
        <el-input v-model="form.dataEntrada"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Fornecedor">
        <el-input v-model="form.fornecedor"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Codigo">
        <el-input v-model="form.nfe.codigo"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="4">
      <el-form-item label="Numero">
        <el-input v-model="form.nfe.numero"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Criar</el-button>
  </el-form-item>
</el-form>
</div>
</template>

뷰

data() {
   return {
     form: this.$store.state.form
   }
},
methods: {
  onSubmit() {
    this.$store.commit("setForm", this.form);
  }
}

가게

양식 요소를 필수 항목으로 설정하지 않고 변경된 필드만 업데이트하려는 경우, 아래 코드는 다음과 같습니다.

mutations: {
setForm(state, payload) {
  state.form = {
    ...state.form,
    ...payload
  };
}
},

언급URL : https://stackoverflow.com/questions/62810967/i-cannot-change-form-input-data-using-vuex