Vue как обновить данные без перезагрузки страницы?

Question

[Snowyyy]

Здравствуйте подскажите, как в Vue обновить данные без перезагрузки страницы?

<template>
    <div class="w-25">
        <div class="mb-3">
            <el-input v-model="name" autosize type="textarea" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <el-input v-model="age"  autosize type="textarea" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <el-input v-model="job" autosize type="textarea" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <input @click.prevent="addPerson" class="btn btn-primary" value="Добавить">
        </div>
    </div>
</template>

<script>

export default {
    name: "StrokaComponent",
    data(){
        return{
            name: null, //Инициализация поля из "<input type="text" class="form-control" v-model="name" id="name" placeholder="name">"
            age: null, //Инициализация поля из "<input type="text" class="form-control" v-model="age" id="age" placeholder="age">"
            job: null, //Инициализация поля из "<input type="text" class="form-control" v-model="job" id="job" placeholder="job">"
        }
    },

    //Этот метод запускается при нажатии на кнопку добавить
    methods: {
        addPerson() { // Даём "название метода", который мы должны указать в кнопке
            axios.post('/api/anketa', {name: this.name, age: this.age, job: this.job}) // axios.post('/api/Указываем название "prefix", {Здесь пречисляем все наши поля})
                .then(res =>{
                    this.name = null //чтобы после добавления данных в базу, поля подчистились
                    this.age = null //чтобы после добавления данных в базу, поля подчистились
                    this.job = null //чтобы после добавления данных в базу, поля подчистились
                    console.log(res);
                })
        }
    }
}
</script>

Comments

[Алексей Ярков]

Так а проблема в чём?

[modelair]

какие данные?

[Snowyyy]

Проблема в том, что я заполняю поля, нажимаю кнопку добавить и, чтобы увидеть, что данные добавились в таблицу надо перезагрузить страницу, а я спрашиваю, как без перезагрузки, а перезагрузить компонент

[modelair]

так у вас тут нет никакой таблицы.
в любом случае - разбирайте то, что вам приходит в ответ в res и подставляйте в таблицу

Answer 1

[Alex D]

Как-то так: Vue песочница

<template>
  	<div>Name - {{name}}</div>
		<div>Name - {{age}}</div>
  	<div>Name - {{job}}</div>
    <div class="w-25">
        <div class="mb-3">
            <input v-model="name" autosize type="text" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <input v-model="age"  autosize type="text" placeholder="Please input"/>
        </div>
        <div class="mb-3">
            <input v-model="job" autosize type="text" placeholder="Please input"/>
        </div>
        <div class="mb-3">
          <a href="#" @click.prevent="addPerson" class="btn btn-primary">Добавить</a>
        </div>
    </div>
</template>

<script setup>

import {ref} from 'vue'
  
const name = ref("")
const age = ref ("")
const job = ref("")

function addPerson() {
  name.value = 'Alex'
  age.value = '21'
  job.value = 'Driver'
}

/*
function addPerson() {
  axios.post('/api/anketa', {name: this.name, age: this.age, job: this.job}) 
    .then(res =>{
    	name.value = res.data.name
    	age.value = res.data.age
    	job.value = res.data.job
    console.log(res);
  })
}
*/
</script>