Question

我有一个带有提交按钮的表单，该表单默认情况下处于禁用状态。如何通过任何更改将其启用，而无需为每个输入或其他方式设置观察器？

在安装或创建模板时，Vuex mapState为空，因此我无法对其进行深度克隆，也无法与deep-diff比较。.（同样，我也读过将状态深度克隆为变量的错误做法）。 / p>

我的按钮

：

<v-btn color="green" @click="onUpdateProfile" :disabled="!anyInputsChanged" :loading="false">Save</v-btn>

我的输入字段：

<InputField
  label="Förnamn"
  v-model="first_name"
/>
<InputField
  label="Efternamn"
  v-model="last_name"
/>

我的脚本

import { mapState } from 'vuex'
import { mapFields } from 'vuex-map-fields'

import FormCard from '@/components/FormCard.vue'
import InputField from '@/components/base_components/InputField.vue'

export default {
  components: {
    FormCard,
    InputField,
  },
  data () {
    return {
      loading: true,
      isDisabled: true,
    }
  },
  computed: {
    ...mapState(['user', 'userProfile']),
    ...mapFields([
        'userProfile.first_name',
        'userProfile.last_name',
        'userProfile.fortnox_data.api_key'
    ]),
  },
  watch: {
  },
  mounted: function() {
    this.loading = false;
  },
  methods: {
    onUpdateProfile () {
      this.$store.dispatch('updateUserData', {
        id: this.user.uid,
        first_name: this.userProfile.first_name,
        last_name: this.userProfile.last_name,
        updated_at: new Date().toISOString(),
      })
    },
  }
}

“ anyInputsChanged”变量/计算出的/我未定义的任何内容，因为我不知道该怎么做。基本上，这就是我的问题。如果要更改任何输入元素，我想启用“提交”，如果所有输入元素都未更改，则要禁用。

Answer 1

假设您正在使用basic updateField mutation，则可以添加Vuex订阅者以监听所有提交并更新额外的状态。

例如

import Vue from 'vue';
import Vuex from 'vuex';

import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

const store = new Vuex.Store({
  strict: true,
  state: {
    modified: false, // ? add this one
    userProfile: {
      // whatever you got
    }
  },
  getters: {
    getField,
  },
  mutations: {
    updateField,
    setModified: (state, modified) => state.modified = !!modified
  },
  // actions, etc
});

// subscribe to "updateField" mutations
store.subscribe((mutation, state) => {
  if (mutation.type === "updateField") {
    store.commit("setModified", true)
  }
})

export default store

然后可以使用modified状态来控制按钮。超级简单的示例，但是您可能想要使用mapState或类似的文件。

<v-btn 
  color="green"
  @click="onUpdateProfile"
  :disabled="!$store.state.modified"
  :loading="false"
>Save</v-btn>

此后的最后一件事是在您的modified动作中将false提交回updateUserAction以重置状态。

Vue＆Vuex-如何在任何输入/状态更改时启用表单提交？

1 个答案: