Vuejs + Laravel answer system

Question

Vuejs + Laravel answer system

Navigation

#1 by (1 votes)

0

I have a problem wanting to update the answers to a question that was asked, the detail is that when answering the question this answer is not updated in the answer list that is in the question.

I leave the code to be checked and they tell me what I'm doing wrong.

Response list of the question asked:

<div class="col-sm-12">
                    <replys v-for="reply in ask.replys" :reply="reply" :key="ask.id"></replys>
                </div>

Form to answer the question

 <div class="col-sm-12">
                    <reply-form v-on:answer="updateReplys" :ask="ask"></reply-form>
                </div>

The components:

Here I post the questions with the answers given:

<script>
    import Replys from './Replys.vue'
    import ReplyForm from  './ReplyForm.vue'
    export default {
        // Options / Data
        created () {
            this.getAskQuestion();
        },
        components: {
            Replys,
            ReplyForm
        },
        data () {
            return {
                replys: [],
                askQuestions: [],
            }
        },
         methods: {
             updateReplys (replys) {
                 this.replys.push(replys);
             },
             getAskQuestion () {
                 axios.get('/paciente/questions')
                     .then(response => {
                         this.askQuestions = response.data.data;
                     });
             }

         },


    }
</script>

Here the compiler Replys

<template lang="html">
    <div class="col-md-10 col-md-offset-1 text-center-xs">
        <div class="list-group-item md-whiteframe-z0 b-l-primary">
            <a href="" class="pull-left w-40 m-r"><img :src="'/user/'+reply.user.id+'/photo'" class="img-responsive img-circle"></a>
            <div class="clear">
                <a href="" class="font-bold block"></a>
                {{ reply.body }}
            </div>
        </div>
    </div>
</template>
<script >
    export default {

         props: ['reply'],

    }
</script>

Here the ReplysForm component

<template lang="html">
    <div class="col-md-10 col-md-offset-1 text-center-xs">
        <div class="list-group-item md-whiteframe-z0 b-l-success">
            <a href="" class="pull-left w-40 m-r"><img :src="user.photo" class="img-responsive img-circle"></a>
            <div class="clear">
                <div class="md-form-group">
                    <form class="" action="" @submit.prevent="createComment(ask)">
                        <textarea class="md-input" rows="2" v-model="body"></textarea>

                        <button md-ink-ripple="" type="submit" class="md-btn md-flat m-b btn-fw text-info waves-effect">Responder</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="">
    export default {

         data () { return {
             user: [],
             body:[]
         } },
        props: ['ask'],

         methods: {
             getUser() {
                 axios.get('/user')
                     .then(response => {
                         this.user = response.data;
                     });
             },
             createComment(ask){
                 axios.post('/paciente/questions/replys',{body: this.body, ask_question_id: ask.id, user_id: user_id}).then(response => {
                     this.$emit('answer', response.data.replys);
                     this.body = ""
                 });

             }
         },

         created () {
             this.getUser()
         },

    }
</script>

laravel vue.js

asked by vdjkelly 28.04.2017 в 19:24

source

1 answer

mysql relationships How can I send emails to my gmail automatically using PHPMailer?

score 1 · Answer 1

From what I understand is a reactivity problem, I recently had a similar problem and if you check this section of the documentation link

shows the following problem

var vm = new Vue({
  data: {
    a: 1
  }
})
// 'vm.a' is now reactive

vm.b = 2
// 'vm.b' is NOT reactive

as a: is initialized is reactive, but b that is inserted into the component is not reactive because it did not exist and vue do not assign getters and setters for this, then notifications of changes are being sent, then we must use

Vue.set(object, key, value)

so that I generated the getters and setters, and be reactive.

then the object would be the one you are using in data, the key would be a non existent key when it was initialized and value would be the new value. then you could replace

    getAskQuestion () {
             axios.get('/paciente/questions')
                 .then(response => {
                     this.askQuestions = response.data.data;
                 });
         }

for

    getAskQuestion () {
         axios.get('/paciente/questions')
             .then(response => {
                 Vue.set(this.askQuestion, 'data', response.data.data)
             });
     }

accessing in this way

this.askQuestion.data

Or you could check if you can insert it directly in this

    getAskQuestion () {
         axios.get('/paciente/questions')
             .then(response => {
                 Vue.set(this, 'askQuestion', response.data.data)
             });
     }

note if you declare in

data () { return { askQuestion }}

will not work, the object does not have to exist to be inserted with the reactive properties