javascript 在可编辑表单内容随Vue3更改时启用和禁用提交按钮

monwx1rj 于 2023-02-21 发布在 Java

关注(0)|答案(1)|浏览(123)

下面是一个可运行的示例，该示例试图模拟的是一个地址可编辑的表单。
表格未变更时，应禁用保存按钮，因为如果没有变更，则没有理由首先提交表格，但如果值发生变更，则应启用保存按钮。
在vue 3中做这件事的好方法是什么，我想补充的一点是，在真实的世界的例子中，我有一个相当大的表单，每个输入都像下面这样列出。我想过使用一个观察器，但我不知道如何处理，因为我不想观察每个单独的值。
如果我将所有数据值分组到一个form数据对象中，那么也许我可以使用深度监视器，但我知道这也是低效的。
另一个细节是，当用户看到表单时，名字是john，并且“保存”按钮被禁用，如果用户将john更改为johnn，则按钮将不再被禁用，但如果值从johnn更改回john，则按钮应再次被禁用，因为表单将返回到其初始状态。
我想到的一种方法是使用v-model为每个表单输入创建一个初始值，例如：

Vue.createApp({
  data() {
    first_name: 'john',
    initial_first_name: 'john'
  }
})

但如果它是一个包含许多字段的大型表单，我会努力寻找实现此类内容的最有效方法，因为我以前从未这样做过。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>
    <style>
      .submit-btn {
        color: #fff;
        background: #000;
        padding: 24px;
      }

      .submit-btn[disabled] {
        color: #fff;
        background: #999;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <form @submit="onSubmit" id="test-form">

        <label for="first_name">First Name</label>
        <input id="first_name" 
          type="text"
          v-model="first_name"
        >

        <label for="email">Email</label>
        <input id="email" 
          type="email"
          v-model="email"
        >

        <input type="submit" 
          value="save" 
          class="submit-btn"
          :disabled=""
        >
      </form>
    </div>

    <script type="module">
      Vue.createApp({
        name: 'form_app',
        data() {
          return {
            first_name: 'john',
            email: 'john@gmail.com'
          }
        },
        methods: {
          onSubmit(e) {
            e.preventDefault()

            console.log('form submitted')
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75502571/enabling-and-disabling-submit-button-if-editable-form-content-changes-with-vue3

1条答案

按热度按时间

hjzp0vay1#

您可以使用React函数用表单数据创建React对象，然后使用计算属性确定表单是否已更改。
例如：

<template>
  <form>
    <label for="first_name">First Name</label>
    <input id="first_name" type="text" v-model="form.first_name">

    <button type="submit" :disabled="formUnchanged">Save</button>
  </form>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const form = reactive({
      first_name: 'John',
    });
    const initialForm = JSON.stringify(form);

    const formUnchanged = computed(() => {
      return JSON.stringify(form) === initialForm;
    });

    return { form, formUnchanged };
  },
};
</script>

您可以使用reactive创建一个带有表单数据的React式表单对象，使用computed创建一个formUnchanged属性，该属性检查表单对象是否已从其初始状态更改。

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 在可编辑表单内容随Vue3更改时启用和禁用提交按钮

1条答案

相关问题

热门标签

最新问答