Обновление данных без перезагрузки страницы во Vue

Question

Подскажите как сделать чтобы при добавление данных 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>

Answer 1

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

Answer 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

БЛОГ НА HUSL

Обновление данных без перезагрузки страницы во Vue

Ответы (2 шт):