如果表单字段的值在 Vue/Nuxt 中没有更改，则禁用提交按钮

Question

我的问题很简单。我有一个表单，用户可以在其中编辑 Nuxt/Vue 应用程序中的条目。现在我想禁用提交按钮，直到表单字段的值没有改变。我使用 Vuex 商店获取条目。

// store/users.js

export const state = () => ({
  currentCustomer: null,
})

export const actions = {
  async fetchCustomer({ commit }, customerId) {
    const customer = await this.$strapi.$customers.findOne(customerId)
    commit('setCurrentCustomer', customer)
  }
}

export const mutations = {
  setCurrentCustomer(state, customer) {
    state.currentCustomer = customer
  },
}

这是我的 Vue/Nuxt 模板：

<template>
    <section class="d-flex flex-column mb-5">
      <b-form v-else class="border rounded bg-white p-4 shadow-sm" @submit.stop.prevent="saveUser">
        <b-form-group class="capital" label-for="name">
          <template v-slot:label> Name <span class="text-danger">*</span> </template>
          <b-form-input id="name" v-model.trim="form.name" type="text" autofocus required></b-form-input>
        </b-form-group>

        <b-form-group class="capital" label-for="email">
          <template v-slot:label> Email <span class="text-danger">*</span> </template>
          <b-form-input id="email" v-model.trim="form.email" type="email" required></b-form-input>
        </b-form-group>

        <p>Changed: {{ changed }}</p>

        <code>Actual: {{ actual }}</code>

        <code>Form: {{ form }}</code>

        <b-row>
          <b-col>
            <button type="submit" :disabled="!changed">Save</button>
          </b-col>
        </b-row>
      </b-form>
    </section>
</template>

<script>
export default {
  data() {
    return {
      changed: false,
    }
  },
  computed: {
    form() {
      return this.$store.state.users.currentCustomer
    },
    actual() {
      return this.$store.state.users.currentCustomer
    },
  },
  watch: {
    form(newValue) {
      this.changed = newValue !== this.actual
    },
  },
  created() {
    this.$store.dispatch('users/fetchCustomer', this.$route.params.id)
  },
}
</script>

上面的代码不起作用。我知道有些事情需要观看，但我无法解决这个问题。我将不胜感激。

Answer 1

对于对象值，在watch中添加deep，另外，你需要lodash.isEqual()来比较两个对象是否相等

import _ from 'lodash';

...
    watch: {
      form: {
        handler(value){
          if(value) {
            this.changed = !_.isEqual(value, this.actual);
          }
        },
        deep: true,
      }
    },
...

Answer 2

尝试使用 @change="onChangeFn" 或 v-on:change="onChangeFn" on

methods: {
  onChangeFn () {
    this.changed = true
  }
}