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

Question

我很困惑我应该如何在 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 完成的。

Answer 1

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

本纳德尔把它最好在自己的博客帖子：

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

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

Vue.js 几乎涵盖了所有这些情况。但如果没有 - 使用表单。