CODEWITHSUNDEEP
laravelvue.js
LUKSTTR
LUKSTTR

Reputation: 25

Updates the data in vue with laravel without refreshing the page or overlapping the div

I have a problem in sight. I just started to learn, but I'm confused about something, why when I update the data I send with axios.post and update them, the devil disappears for 2 seconds and refreshes the page. Look how I thought

<li v-for="question in questions" :key="question.id" class="list-group-item">
            {{ question.questiontype }}
        <br>
        <button v-on:click="addVote(question.id)">Add 1</button>
        <br>
        <span class="badge badge-primary"><strong>{{ question.votes }}</strong></span>
        </li>
data() {
            return {
              success: false,
              questions:[],
              percentages:[],
            }
        },
        created() {
            this.getQuestions(),
            this.getPercentages()
        },
        methods: {
            getQuestions(){
                axios.get('/api/questionlist')
                    .then((response)=>{
                       this.questions = response.data.question
                    })
            },
            getPercentages(){
                axios.get('/api/getpercentage')
                    .then((response)=>{
                       this.percentages = response.data.percentage
                    })
            },
            addVote(id) {
               axios.post('api/vote/' + id)
                    .then((response) => {
                        this.questions = response.data.question
                        console.log(response.data)
                        this.getQuestions()
                    })
            }

So I'm interested in the data I sent with the post. I would like the page to update without refresh or to overlap the div for 2 seconds. What exactly am I doing wrong? I tried a few ways on stackoverflow but they didn't help

Upvotes: 0

Views: 1123

Answers (1)

tamrat
tamrat

Reputation: 1915

If your button is inside a form, you probably want to add type="button" attribute to it or prevent the form submission action.

<button type="button" v-on:click="addVote(question.id)">Add 1</button>

OR:

<button v-on:click.prevent="addVote(question.id)">Add 1</button>

I'm guessing that's probably why you're seeing the page refresh. If you want to display the updated data, you either need to make another axios call to fetch or you need to return the new entry from your API endpoint and push/add it to your list.

So modify your code as follows:

addVote(id) {
   axios.post('api/vote/' + id)
        .then((response) => this.getQuestions());
}

Upvotes: 1

Related Questions