最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - submitting forms in vuejs, should I use the form tag? - Stack Overflow

programmeradmin1浏览0评论

I'm so confused how I should submit and handle edit forms in vuejs.

How I'm doing it now is I have a ponent called 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>

And in the parent ponent I do:

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

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

And in my vuex I do:

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

const api = axios.create({
  baseURL: '',
  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({mit}, payload) {
      api
        .post('/trees/update/', payload)
        .then(response => {
          if (response.data.success == 1) {
            mit('updateTree', payload);
          } else {
            console.log(response.data.success);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
});

But I feel like This is not the correct way to do it specially because I'm not using <v-form> or <form> tags. I also haven't incorporated validation yet, I'm thinking of using vuelidate. So please give me the best practice for submitting and handling edit form while validation is done by vuelidate.

I'm so confused how I should submit and handle edit forms in vuejs.

How I'm doing it now is I have a ponent called 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>

And in the parent ponent I do:

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

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

And in my vuex I do:

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

const api = axios.create({
  baseURL: 'https://api.mydomain./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({mit}, payload) {
      api
        .post('/trees/update/', payload)
        .then(response => {
          if (response.data.success == 1) {
            mit('updateTree', payload);
          } else {
            console.log(response.data.success);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
});

But I feel like This is not the correct way to do it specially because I'm not using <v-form> or <form> tags. I also haven't incorporated validation yet, I'm thinking of using vuelidate. So please give me the best practice for submitting and handling edit form while validation is done by vuelidate.

Share Improve this question asked Sep 4, 2019 at 17:12 yukashima huksayyukashima huksay 6,2489 gold badges49 silver badges86 bronze badges 1
  • The Vue Material page have a Form's example, I think that can help you: vuematerial.io/ponents/form. You can look the implementation. – Augusto Commented Sep 4, 2019 at 17:21
Add a ment  | 

1 Answer 1

Reset to default 10

Basically, the form tag is not mandatory. Unless using some kind of CSS framework, the UI will look the same with or without the form tag. But, it still has some pros:

Ben Nadel put it best in his blog post:

... it seems that using a FORM tag does have some benefits, depending on your particular situation:

  • You need it if you want to execute a traditional (ie. non-AJAX) form post.
  • You need it you want to capture the "submit" event programmatically.
  • You need it in order for mobile Safari to show the "Go" button on the keyboard.
  • You need it if you want to programmatically "reset" a form (ie. call reset()).
  • It makes generic form serialization easier (since it groups input fields).
  • You need it if you want to post files without the modern file API.
  • You need it if you have to segregate fields with the same name.

Vue.js gets you covered in almost all these situations. But if it doesn't - use form.

发布评论

评论列表(0)

  1. 暂无评论