title: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'data' of undefined" // undefined
body: <p>I am trying to push data from a <code>v-text-field</code> onto a json file. When i tried it on Postman it worked so I'm guessing the error is coming from the client side</p>
  
  <p>product.vue</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;v-container&gt;
     &lt;v-row&gt;
        &lt;v-col&gt;
           &lt;v-text-field
              label="440"
              v-model="onetext"
              &gt;&lt;/v-text-field&gt;
           &lt;v-text-field
              label="Card Type"
              v-model="twotext"
              &gt;&lt;/v-text-field&gt;
           &lt;v-text-field
              label="Card Type"
              v-model="threetext"
              &gt;&lt;/v-text-field&gt;
           &lt;v-text-field
              label="Card Type"
              v-model="fourtext"
              &gt;&lt;/v-text-field&gt;
           &lt;v-text-field
              label="Card Type"
              v-model="fivetext"
              &gt;&lt;/v-text-field&gt;
           &lt;v-text-field
              label="Card Type"
              v-model="sixtext"
              &gt;&lt;/v-text-field&gt;
           &lt;v-text-field
              label="Card Type"
              v-model="seventext"
              &gt;&lt;/v-text-field&gt;
        &lt;/v-col&gt;
     &lt;/v-row&gt;
  &lt;/v-container&gt;
  &lt;/v-card-text&gt;
  &lt;v-card-actions&gt;
     &lt;v-spacer&gt;&lt;/v-spacer&gt;
     &lt;v-btn color="primary"  @click="dialog = false"&gt;Close&lt;/v-btn&gt;
     &lt;v-btn color="primary"  @click="create"&gt;Save&lt;/v-btn&gt;
  &lt;/v-card-actions&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import ProductService from '@/services/ProductService'
  export default {
    components: {},
    data() {
      return {
        dialog: false,
        product: null,
        onetext: null,
        twotext: null,
        threetext: null,
        fourtext: null,
        fivetext: null,
        sixtext: null,
        seventext: null
      }
    },
    async mounted() {},
    methods: {
      async create() {
        try {
          await ProductService.create(this.onetext, this.twotext, this.threetext, this.fourtext, this.fivetext, this.sixtext, this.seventext)
        } catch (error) {
          this.error = error.response.data.message
        }
      }
    }
  }
  </code></pre>
  
  <p>ProductService.js</p>
  
  <pre><code>export default {
      create(){
          return Api().post('/product', one, two, three, four, five, six, seven);
      }
  }
  </code></pre>
  
  <p>ProductRouter:</p>
  
  <pre><code>router.post("/", function(req, res){
      try{
          const fileName = path.resolve("server",'../product.json');
          const file = require(fileName);
  
          const product = {
              101: req.params.one,
              201: req.params.two,
              420: req.params.three,
              440: req.params.four,
              444: req.params.five,
              451: req.params.six,
              452: req.params.seven
          }
  
          fs.writeFile(fileName, JSON.stringify(product, null, 2), function(err){
              if (err){
                  return console.log(err);
              }
              console.log("the file was saved");
              res.status(200).json(product);
          });
      } catch(err){
          res.status(500).json({
              message: "Error writing to file",
              error: err
          });
      }
  })
  </code></pre>
  
  <blockquote>
    <p>ERR: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'data' of undefined"</p>
  </blockquote>
  
  <ul>
  <li>Why am i getting this error and is there anything i could do to fix this?</li>
  </ul>
  
  <p>EDIT: Expected product.json file</p>
  
  <pre><code>{
    "101": 1.9,
    "201": 2.18,
    "420": 4.1,
    "440": 9.2,
    "444": 11.16,
    "451": 122.12,
    "452": 11.9
  }
  </code></pre>