Please kindly help me with this, because I'm new in vue.js.

So, I have 2 Vue files :

1. Greetinglist.vue, It calls data from api using axios.get
2. Greeting.vue, It posts data using axios.post

After submit data, how to refresh the data without reload the page ? I'm using <script setup> tag.

(greetinglist.vue)

 <div  v-for="(message, index) in messages" :key="index">
   <div>
      <h3>{{ message.name }}<span>{{message.date}}</span></h3>
      <p >{{ message.greeting }}</p>
      </div>
    <hr/>
 </div>

<script setup>
import {ref, onMounted } from 'vue'
import axios from 'axios'

let messages = ref([]);

function getMessages() {
    axios.get('http://127.0.0.1:8000/api/messages')
    .then((result) => {
        messages.value = result.data
    }).catch((err) => {
        console.log(err.response.data)
    })
}

onMounted(() => {
    getMessages()
});
</script>

(Greeting.vue)

<form @submit.prevent="store()">
  <div >
     <input type="text" placeholder="" v-model="messages.name">
     <textarea name="" id="" cols="28" rows="10" placeholder="" v-model="messages.greeting"></textarea>
  </div>
  <button>Submit</button>
</form>
 <div>
   <GreetingList/>
 </div>

<script setup>
import { reactive } from 'vue'
import axios from 'axios'
import GreetingList from './GreetingList.vue'

const messages = reactive({
    name: '',
    greeting: '',
});

function store() {
    axios.post('http://127.0.0.1:8000/api/messages', messages)
    .then((result) => {
        
        messages.name = ''
        messages.greeting = ''
    })
    .catch((err) => {
    })
}
</script>

CodePudding user response：

You can move getMessages function to greeting.vue, and change greetinglist.vue to use props

greeting.vue

<form @submit.prevent="store()">
  <div >
     <input type="text" placeholder="" v-model="messages.name">
     <textarea name="" id="" cols="28" rows="10" placeholder="" v-model="messages.greeting"></textarea>
  </div>
  <button>Submit</button>
</form>
 <div>
   <GreetingList :messages="messageList" />
 </div>

<script setup>
import { reactive } from 'vue'
import axios from 'axios'
import GreetingList from './GreetingList.vue'

const messages = reactive({
    name: '',
    greeting: '',
});
let messageList = ref([])

function store() {
    axios.post('http://127.0.0.1:8000/api/messages', messages)
    .then((result) => {
        
        messages.name = ''
        messages.greeting = ''

        getMessages()
    })
    .catch((err) => {
    })
}

function getMessages() {
    axios.get('http://127.0.0.1:8000/api/messages')
    .then((result) => {
        messageList.value = result.data
    }).catch((err) => {
        console.log(err.response.data)
    })
}

onMounted(() => {
    getMessages()
});
</script>

greetinglist.vue

<script setup>
  defineProps(['messages'])
</script>

CodePudding user response：

If I understood your requirement correctly, I am assuming you have both the components in a single page and you want to get the details of newly added greeting from Greeting.vue in the GreetingList.vue reactively (without refreshing the route). If Yes, You can achieve that by calling a getMessages() method on successfully promise of axios.post and then pass the results in the GreetingList.vue.

Demo (I just created it using Vue 2, You can change it accordingly as per Vue 3) :

Vue.component('child', {
  // declare the props
  props: ['msglist'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: `<div>
              <div v-for="(message, index) in msglist" :key="index">
                <h3>{{ message.name }}</h3>
                <p>{{ message.greeting }}</p>
                <hr/>
              </div>
             </div>`
});

var app = new Vue({
  el: '#app',
  data: {
    messages: {
      name: null,
      greeting: null
    },
    // For demo, I am just mock data for initial greeting listing.
    messageList: [{
        name: 'Alpha',
        greeting: 'Hi !'
      }, {
        name: 'Beta',
        greeting: 'Hello !'      
      }]
  },
  methods: {
    store() {
        // Post API call will happen here.
      // on success, make a call to get list of greetings.
      if (this.messages.name && this.messages.greeting) {
        this.getMessages();
      }
    },
    getMessages() {
        // Get API call will happen here. For demo, I am just using the mock data and pushing the newly submitted greeting in a exisiting messageList.
      this.messageList.push({
        name: this.messages.name,
        greeting: this.messages.greeting
      })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" placeholder="Name" v-model="messages.name"/>
     <textarea cols="28" rows="10" placeholder="Greeting" v-model="messages.greeting"></textarea>
     <button @click="store">Submit</button>
  <child :msglist="messageList">
  </child>
</div>