2

Подскажите как сделать чтобы при добавление данных Vue сразу же отображал данные без перезагрузки страницы.

Добавил в form @submit.prevent="createPost", однако это не помогло т.к. при добавление данных, Vue их не отображает. Данные появляются лишь после перезагрузки страницы.

Где я мог ошибиться? Или что-то не добавил? Заранее спасибо за ответ.

<template>
<div>
    <form @submit.prevent="createPost">
        <div>
            <input type="text" v-model="author">
              <input type="text" v-model="title">
                <input type="text" v-model="content">
        </div>
        <button >Ввод</button>
    </form>
    <ul>
     
      <li  v-for="Item in  News" :key="Item._id">
        
       <p> {{Item._id}}</p>
         <p> {{Item.author}}</p>
         <p> {{Item.title}}</p>
         <p> {{Item.content}}</p>
        
    
         </li>
     
     </ul>
</div>
</template>
    <script>
    export default {
        data:()=>({
            
author:'',
title:'',
content:'',
 News:[]

        }),
    methods: {
        async createPost(){
            const data = {
                author:this.author, 
                title:this.title,
                content:this.content  

            } 
            const res = await fetch('http://localhost:5000/api/posts',{
                method: 'POST',
                headers: {
                'Content-Type': 'application/json'
                },
                body:JSON.stringify(data)
            })
            this.author='';
            this.title='';
                this.content =''
                
        }
    },
    mounted() {
  fetch('http://localhost:5000/api/posts')
    .then(response => response.json())
   .then(data => this.News=data)
   .catch(err => console.log(err)) 
    },
    }
    </script>

2 ответа 2

2

Добавьте в data поле (в вашем коде это News: []), в котором записывайте массив полученных данных и добавляйте в него введённые данные после выполнения POST-запроса. Примерно так:

this.News.push({
    author: this.author,
    title: this.title,
    content: this.content
}) 

Важно понимать что Vue реактивными являются Props и Data. После обновления значения Vue сразу же перерендерит страницу с новым значением.

Поскольку Vue не позволяет динамически добавлять корневые реактивные свойства, это означает, что все корневые поля необходимо инициализировать изначально, хотя бы пустыми значениями:

let vm = new Vue({
  data: {
    // объявляем поле message, содержащее пустую строку
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// впоследствии задаём значение `message`
vm.message = 'Привет!'

Подробно о реактивности читайте в документации: https://ru.vuejs.org/v2/guide/reactivity.html

2
  • 1
    Благодарю за помощь ! Действительно нужно было запушить в массив после того когда отправил данные методом POST и после этого информация появится . 4 авг 2021 в 10:15
  • @АлексейДемидов обращайтесь) 4 авг 2021 в 11:54
2

вы не добавляете данные в News после отправки fetch. тут есть два варианта: либо вручную новые данные запушить в News, либо сделать метод, где вы будете получать данные и вызывать его в mounted, а также после fetch

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.