vue提交表单用什么 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

在Vue中提交表单有多种方法，可以根据实际情况选择使用相应的方式。

使用普通表单提交：可以直接在Vue中使用普通的<form>标签，并设置action和method属性来指定提交的目标和方式。当提交表单时，浏览器会刷新页面并发送请求到指定的目标。

<!-- 普通表单提交 -->
<form action="/submit" method="post">
  <input type="text" name="username" v-model="formData.username">
  <input type="password" name="password" v-model="formData.password">
  <button type="submit">提交</button>
</form>

使用AJAX提交：Vue可以使用axios、fetch等库来发送异步请求，以实现表单的提交，并在不刷新页面的情况下获取响应。

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.username">
    <input type="password" v-model="formData.password">
    <button type="submit">提交</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      axios.post('/submit', this.formData)
        .then(response => {
          // 处理提交成功的逻辑
        })
        .catch(error => {
          // 处理提交失败的逻辑
        });
    },
  },
};
</script>

使用Vue官方提供的vue-resource库：Vue 2.x版本之前提供了vue-resource库来处理HTTP请求，可以使用其中的this.$http.post()方法来提交表单。

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.username">
    <input type="password" v-model="formData.password">
    <button type="submit">提交</button>
  </form>
</template>

<script>
import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      this.$http.post('/submit', this.formData)
        .then(response => {
          // 处理提交成功的逻辑
        })
        .catch(error => {
          // 处理提交失败的逻辑
        });
    },
  },
};
</script>

根据实际需求和项目的情况，选择适合的方法来提交表单。以上是其中几种常见的方法，还有其他的方法如使用第三方插件等，具体可根据实际情况进行选择。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，可以使用以下几种方式来提交表单：

在表单元素上使用v-on指令监听submit事件，并将事件绑定到一个methods方法上，当用户点击提交按钮时，触发该方法。在该方法中，你可以通过$refs来获取表单元素的值，并使用axios等工具发送请求将数据提交到后台。

<template>
  <form @submit="submitForm">
    <!-- 表单元素 -->
    <input type="text" v-model="username" ref="username" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  },
  methods: {
    submitForm(event) {
      event.preventDefault(); // 阻止表单的默认提交行为
      const data = {
        username: this.$refs.username.value
      };
      // 使用axios发送请求将数据提交到后台
    }
  }
};
</script>

使用Vue的双向数据绑定v-model指令来绑定表单元素的值，在点击提交按钮时直接访问绑定的数据，不需要使用$refs。

<template>
  <form @submit="submitForm">
    <!-- 表单元素 -->
    <input type="text" v-model="username" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  },
  methods: {
    submitForm(event) {
      event.preventDefault();
      const data = {
        username: this.username
      };
      // 使用axios发送请求将数据提交到后台
    }
  }
};
</script>

可以使用自定义指令来扩展Vue的表单提交功能。自定义指令可以用于对特定的表单元素进行验证或自定义提交行为。

<template>
  <form @submit="submitForm">
    <!-- 表单元素 -->
    <input type="text" v-model="username" v-submit />
    <button type="submit">提交</button>
  </form>
</template>

<script>
Vue.directive('submit', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('keydown', function (event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        vnode.context.$emit('submitForm');
      }
    })
  }
})

export default {
  data() {
    return {
      username: ""
    };
  },
  methods: {
    submitForm() {
      const data = {
        username: this.username
      };
      // 使用axios发送请求将数据提交到后台
    }
  }
};
</script>

使用第三方表单处理库，例如Vue Formulate、VeeValidate等，这些库提供了更强大和便捷的表单处理功能，包括表单验证、自定义校验规则、提交前处理等。
如果使用Vue与Vuex配合，可以将表单的值保存在Vuex的state中，在提交时直接获取state中的值。这样可以实现在多个组件中共享表单数据，方便管理和修改。

总结：根据具体需求和项目情况，可以选择使用上述的任意一种方式来提交表单。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，可以使用Vue的表单指令和数据绑定来提交表单。主要有两种方法来提交表单：使用原生的HTML表单提交方式或使用Vue的提交表单方法。

使用原生的HTML表单提交方式：
要使用原生的HTML表单提交方式，可以在Vue模板中使用<form>元素，并在<form>元素中定义action和method属性。

<template>
  <form action="/submit" method="post">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
</template>

在这个例子中，表单会将数据通过POST请求提交到/submit的路由中。

使用Vue的提交表单方法：
在Vue中，可以使用Vue的事件绑定和数据绑定来处理表单的提交。可以通过监听表单的submit事件并调用相应的处理函数来实现。

<template>
  <form @submit="handleSubmit">
    <div>
      <label for="name">Name:</label>
      <input v-model="name" type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">Email:</label>
      <input v-model="email" type="email" id="email" name="email">
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // 阻止表单提交的默认行为
      // 在这里可以进行表单验证等操作
      // 使用this.name和this.email获取表单中的值
      console.log("Name:", this.name);
      console.log("Email:", this.email);
            
      // 在这里可以通过axios等工具发送表单数据到服务器
      // axios.post('/submit', {name: this.name, email: this.email})
      //   .then(response => {
      //     console.log(response);
      //   })
      //   .catch(error => {
      //     console.log(error);
      //   })
    }
  }
}
</script>

在这个例子中，当用户点击表单中的提交按钮时，将会调用实例的handleSubmit方法来处理表单提交。可以根据需要在handleSubmit方法中进行表单验证、数据处理和发送到服务器的操作。在上面的例子中，用console.log语句来打印表单中的值，但实际中可以使用axios等工具将表单数据发送到服务器。

总结：Vue可以通过原生的HTML表单提交方式或通过Vue的事件绑定和数据绑定来提交表单。使用原生的HTML表单提交方式需要在模板中使用<form>元素，并定义action和method属性。使用Vue的提交表单方法可以通过监听表单的submit事件，并在方法中进行相应的操作。同时，也可以使用Vue的表单指令和数据绑定来获取和处理表单中的数据。最后，可以使用axios等工具将表单数据发送到服务器。

1年前 0条评论