Блог

У меня есть форма с кнопкой отправки, которая по умолчанию отключена. Как мне включить ее при любых изменениях, не настраивая наблюдателя для каждого ввода или каким-либо другим способом??

Состояние карты Vuex пусто, когда шаблон смонтирован или создан, поэтому я не могу глубоко клонировать его и сравнивать, например, с deep-diff.. (также я прочитал его плохую практику глубокого клонирования состояний в переменные).

Моя кнопка:

 <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» / вычисляемая / что угодно, что я не определил, потому что я не знаю, как это сделать. И в основном это мой вопрос.. Я хочу включить «Отправить», если какой-либо элемент ввода изменился, и отключить, если все они не изменились.

Предполагая, что вы используете базовую updateField мутацию, вы могли бы добавить подписчика 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 действии для сброса состояния.