Ошибка в обработчике v-on (Promise / asyn c): «Ошибка типа: невозможно прочитать свойство« данные »из неопределенного» // undefined

Question

Я пытаюсь записать sh данные из v-text-field в файл json. Когда я попробовал это на Postman, это сработало, поэтому я предполагаю, что ошибка исходит от клиентского продукта

. vue

<v-container>
   <v-row>
      <v-col>
         <v-text-field
            label="440"
            v-model="onetext"
            ></v-text-field>
         <v-text-field
            label="Card Type"
            v-model="twotext"
            ></v-text-field>
         <v-text-field
            label="Card Type"
            v-model="threetext"
            ></v-text-field>
         <v-text-field
            label="Card Type"
            v-model="fourtext"
            ></v-text-field>
         <v-text-field
            label="Card Type"
            v-model="fivetext"
            ></v-text-field>
         <v-text-field
            label="Card Type"
            v-model="sixtext"
            ></v-text-field>
         <v-text-field
            label="Card Type"
            v-model="seventext"
            ></v-text-field>
      </v-col>
   </v-row>
</v-container>
</v-card-text>
<v-card-actions>
   <v-spacer></v-spacer>
   <v-btn color="primary"  @click="dialog = false">Close</v-btn>
   <v-btn color="primary"  @click="create">Save</v-btn>
</v-card-actions>

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
      }
    }
  }
}

ProductService. js

export default {
    create(){
        return Api().post('/product', one, two, three, four, five, six, seven);
    }
}

ProductRouter:

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
        });
    }
})

ERR: ошибка в обработчике v-on (Promise / asyn c): «Ошибка типа: невозможно прочитать свойство« данные »из неопределенного "

• Почему я получаю эту ошибку и могу ли я что-нибудь сделать, чтобы это исправить?

РЕДАКТИРОВАТЬ: Ожидаемый продукт. json file

{
  "101": 1.9,
  "201": 2.18,
  "420": 4.1,
  "440": 9.2,
  "444": 11.16,
  "451": 122.12,
  "452": 11.9
}

Answer 1

Решение:

Ваша функция create использует аргументы, которые не были переданы. Измените его на:

export default {
    create(one, two, three, four, five, six, seven){ // <-- add arguments
        return Api().post('/product', one, two, three, four, five, six, seven);
    }
}

---

Улучшение:

Упростите все:

1) Переместите все данные модели формы в один объект данных formData:

return {
  // ...
  formData: {
    onetext: null,
    twotext: null,
    ...
  }
}

2) В шаблоне вместо жесткого кодирования списка v-text-field используйте v-for до l oop над этим formData объектом:

<v-text-field v-for="(value, key) in formData" :key="key"
              label="Card Type" v-model="formData[key]"
></v-text-field>

3) Передайте объект formData в методе create вместо нескольких аргументов:

await ProductService.create(this.formData);

4) Измените ProductService.create, Api().post и router.post на использовать / передать этот объект:

create(formData){ // <-- Accepts an object now
    return Api().post('/product', formData); // <-- Passes the object
}

Вот демо