[Vuejs]-How to insert vue.js computed data into form data?

by

0👍

The easiest way to accomplish this would be something like this.. I have commented different options within the code to help explain things..

new Vue({
  el: "#root",
  template: `
  <div>
    <form ref="form">
      <!--<input v-model="measure.length">
      <input v-model="measure.width">-->
      <input v-model="length">
      <input v-model="width">
    </form>
    <button @click.prevent="uploadMeasurement">Submit</button>
  </div>
  `,
  data: {
    //measure: ""
    length: "",
    width: "",
  },
  computed: {
    sqftTotal: function() {
      //return this.measure.length * this.measure.width;
      return this.length * this.width;
    }
  },
  methods: {
    uploadMeasurement() {
      /** This is where you would POST the data **/
      
      // You can either submit the form:
      // -NOTE: '...$refs.form...' below must match the ref
      //        you assign to the <form ref="form"> element.

      // this.$refs.form.$el.submit();

      // ~ OR ~

      // manually POST via fetch, etc:

      // fetch('/url/to/post/to', {
      //   method: 'POST',
      //   body: JSON.stringify({
      //     length: this.measure.length,
      //     width: this.measure.width,
      //     sqftTotal: this.sqftTotal
      //   })
      // })
      
      alert(JSON.stringify({
        //length: this.measure.length, 
        //width: this.measure.width, 
        length: this.length,
        width: this.width,
        sqftTotal: this.sqftTotal
      }));
    },
    createFreshMeasure() {
      this.length = 10;
      this.width = 5;
      //return {
      //  length: 10,
      //  width: 5
      //};
    }
  },
  created() {
    this.createFreshMeasure();
  //this.measure = this.createFreshMeasure();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="root"></div>
👤Matt Oestreich

0👍

  methods: {
    uploadMeasurement() {
      let measure = this.measure;
      measure.sqftTotal = this.sqftTotal;
      MeasurementService.uploadMeasurement(measure)
      ...

Got it, thanks to everyone for your input. Had to remove the argument from the method and declare it before the service call.

👤connorcode

-2👍

I recommend cleaning up your code like below, as Vue often has issues when using object properties as a model like that

<template>
    <form @submit.prevent="uploadMeasurement()">
      <input v-model="length">
      <input v-model="width">
    </form>
</template>

<script>
    export default {
      data() {
        return {
          length: null,
          width: null,
        };
      },
      computed: {
        sqftTotal: function() {
          return this.length * this.width;
        }
      },
      methods: {
        uploadMeasurement() {
          MeasurementService.uploadMeasurement({
              length: this.length,
              width: this.width,
              sqftTotal: this.sqftTotal
            })
            .then(() => {
              console.log('save success!');
            })
            .catch(error => {
              this.error = error.response.data.error;
            });
        },
    }
</script>
👤Ryan Charmley

Leave a comment