vuejs로 양식을 제출하면 양식 태그를 사용해야 하는가?

vuejs로 양식을 제출하면 양식 태그를 사용해야 하는가?

나는 vuejs의 편집 양식을 어떻게 제출하고 처리해야 할지 너무 혼란스럽다.

지금 내가 하는 일은 트리폼이라는 부품을 가지고 있다.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에 의해 이루어지는 동안 나에게 편집 양식 제출과 처리를 위한 최선의 방법을 알려주기 바란다.

기본적으로 더form태그는 필수 항목이 아니다.어떤 종류의 CSS 프레임워크를 사용하지 않는 한 UI는 사용 여부와 상관없이 동일하게 보일 것이다.form하지만 여전히 몇 가지 장점이 있다.

벤 나델은 자신의 블로그 포스트에 이 사실을 가장 잘 표현했다.

...특정 상황에 따라 FORM 태그를 사용하면 몇 가지 이점이 있는 것 같다.

• 기존(즉, 비 AJAX) 양식 게시물을 실행하려면 이 문서가 필요하다.
• "제출" 이벤트를 프로그래밍 방식으로 캡처하고 싶은 경우.
• 모바일 사파리가 키보드에 "Go" 버튼을 표시하려면 그것이 필요하다.
• 양식(예: 호출 재설정())을 프로그래밍 방식으로 "재설정"하려면 이 기능이 필요하다.
• 입력 필드를 그룹화하므로 일반 형식 직렬화가 쉬워진다.
• 현대적인 파일 API 없이 파일을 게시하려면 그것이 필요하다.
• 같은 이름의 밭을 분리해야 한다면 그것이 필요하다.

Vue.js는 거의 모든 상황에서 당신을 보호한다.그러나 그렇지 않다면 양식을 사용하십시오.

참조URL: https://stackoverflow.com/questions/57793048/submitting-forms-in-vuejs-should-i-use-the-form-tag