在 vuejs 中提交表单，我应该使用表单标签吗？

Posted 2023-02-22

【中文标题】在 vuejs 中提交表单，我应该使用表单标签吗？

【英文标题】：submitting forms in vuejs, should I use the form tag?

【发布时间】：2020-01-07 14:55:53

【问题描述】：

我很困惑如何在 vuejs 中提交和处理编辑表单。

我现在的做法是我有一个名为 TreeForm.vue 的组件：

<template>
  <div>
    <v-text-field v-model="cloned_tree.root" />
    <v-text-field v-model="cloned_tree.root" />
    <v-file-input type="number" v-model="cloned_tree.fruits" />
    <v-btn @click="$emit('save', idx: tree_idx, tree: cloned_tree)">Save</v-btn>
  </div>
</template>

<script>
  export default 
    props: tree_idx: Number,
    data() 
      return 
        cloned_tree: JSON.parse(JSON.stringify(this.$store.state.trees[this.tree_idx])),
      ;
    ,
  ;
</script>

在父组件中我这样做：

<template>
  <div>
    ...
    <TreeForm tree_idx="0" @save="submitTreeForm" />
    ...
  </div>
</template>

<script>
  import mapActions from 'vuex';
  export default 
    methods: 
      ...mapActions(['submitTreeForm']),
    ,
  ;
</script>

在我的 vuex 中我会这样做：

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

const api = axios.create(
  baseURL: 'https://api.mydomain.com/api',
  timeout: 10000,
  withCredentials: true,
);
Vue.use(Vuex);
export default new Vuex.Store(
  strict: process.env.NODE_ENV !== 'production',
  state: 
    trees: [
      
        root: 'hello',
        imageFile: require('some/picture'),
        fruits: 5,
      ,
    ],
  ,
  mutations: 
    updateTree(state, payload) 
      state.trees[payload.idx] = payload.tree;
    ,
  ,
  actions: 
    submitVideoForm(commit, payload) 
      api
        .post('/trees/update/', payload)
        .then(response => 
          if (response.data.success == 1) 
            commit('updateTree', payload);
           else 
            console.log(response.data.success);
          
        )
        .catch(function(error) 
          console.log(error);
        );
    ,
  ,
);

但我觉得这不是专门做这件事的正确方法，因为我没有使用<v-form> 或<form> 标签。我还没有合并验证，我正在考虑使用 vuelidate。所以请给我一个提交和处理编辑表单的最佳实践，而验证是由 vuelidate 完成的。

【问题讨论】：

Vue Material 页面有一个Form的例子，我想可以帮助你：vuematerial.io/components/form。你可以看看实现。

【参考方案1】：

基本上，form 标签不是强制性的。除非使用某种 CSS 框架，否则无论有没有 form 标签，UI 看起来都一样。但是，它仍然有一些优点：

Ben Nadel 在他的博客post 中说得最好：

...似乎使用 FORM 标签确实有一些好处，具体取决于 根据您的具体情况：

如果您想执行传统（即非 AJAX）表单，则需要它 邮政。 您需要它来捕获“提交”事件 以编程方式。 您需要它才能让移动版 Safari 显示 键盘上的“开始”按钮。 如果你想的话，你需要它 以编程方式“重置”表单（即调用 reset()）。 它使通用 表单序列化更容易（因为它对输入字段进行分组）。 如果您想在没有现代文件 API 的情况下发布文件，则需要它。 如果您必须分隔具有相同名称的字段，则需要它。

Vue.js 几乎可以让您应对所有这些情况。但如果没有 - 使用表单。

【讨论】：

如果你想按书行事，那就加上form标签吧。