Блог

У меня есть список сообщений, которые я получаю из своей «базы данных макетов». Я хочу иметь другое представление для составления нового сообщения и перечислить его в одном списке с другими. Мой вопрос здесь заключается в том, как отправить данные из формы ввода в представлении 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 resu<
};

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 amp;amp; dateToFilter;

    return searchFilter amp;amp; 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>
 

and here is my messageComposing view