javascript - 如何使用 Vue 将数据从视图发送到数据库？

Question

我有从“模型数据库”中获得的消息列表。我想有另一个视图来撰写新消息，并将其与其他列表放在同一个列表中。我的问题是如何将 composingMessage 视图中的输入表单中的数据发送到数据库中的消息数组。

   const result = [];
 [... (new Array(50))].forEach((e, index) => {
    const createdAt = new Date();
    createdAt.setDate(createdAt.getDate() + Math.ceil(Math.random() * 10));
    const message = {
      id: index + 1,
      parentId: null,
      createdAt: createdAt,
      sender: 'Sender ' + index,
      title: 'Title ' + index,
      text: 'Message text ' + index
    };
    result.push(message);
  });
  return result;
};

const allMessages = getRandomMessages(50);
const newMessage = newMessage;


console.log(allMessages);
export const getMessages = (search, dateFrom, dateTo, offset, limit) => {
  const results = allMessages.filter(a => {
    //search filter
    const titleLowerCase = a.title.toLowerCase();
    const senderLowerCase = a.sender.toLowerCase();
    const searchLowerCase = search ? search.toLowerCase() : '';
    const searchFilter = titleLowerCase.includes(searchLowerCase) || senderLowerCase.includes(searchLowerCase);

    //date filter
    const dateFromFilter = dateFrom ? a.createdAt > new Date(dateFrom) : true;
    const dateToFilter = dateTo ? a.createdAt < new Date(dateTo) : true;
    const dateFilter = dateFromFilter && dateToFilter;

    return searchFilter && dateFilter;

  });
  return results.slice(offset, offset + limit);

};

这是我的带有搜索和日期过滤器的模型数据库

<template>
  <main-layout>
    <form class="form-style">
      <v-text-field
        v-model="name"
        class="name-form"
        label="Name"
        required
      />
      <v-col
        cols="20"
        md="15"
      >
        <v-textarea
          v-model="message"
          outlined
          name="input-7-4"
          label="Message"
          class="textarea-form message"
          required
        />
      </v-col>
      <v-btn
        class="button"
        color="primary"
        @click="onSubmit"
      >
        submit
      </v-btn>
    </form>
  </main-layout>
</template>
<script>
    import MainLayout from '@/components/layout/MainLayout.vue';
    import Messages from '@/api/Messages';

    export default {
        components: {
            'main-layout': MainLayout
            },
        data(){
            return{
                name: '',
                message: ''

            };
        },
        methods: {
            onSubmit(e){
                e.preventDefault();

                if(!this.name){
                    alert('Pleace add your name');
                    return;
                }

            const newMessage = {
                name: this.name,
                message: this.message
            };

        this.$emit('add-message', newMessage);
        this.name = '';
        this.message = '';
            }
        }
    };
</script>

这是我的 messageComposing 视图

标签： javascriptarraysvue.jsvue-component