CODEWITHSUNDEEP
javascriptphphtmllaravel-5vuejs2
booky
booky

Reputation: 31

Laravel, Vue Livesearch - after Ajax response issue

I'm facing probably a trivial issue but I'm looking around since two days and i can't figure out a solution by my self. I want to create a Livesearch, with Vue and Laravel.

SearchInput.vue

<template>
    <div id="search-input">
        <input placeholder="Search" v-model="SearchText" type="text" @keyup="sendSearch"/>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          SearchText: ''
        }
      },
      methods: {
        sendSearch(){
          this.$emit('searchsent', {
            searchinputparam: this.SearchText,
            });
        }
      }
    }
</script>

search.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Chatroom</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>

        <div id="app2">
        <h1>Search</h1>
         <search-input v-on:searchsent="searchinputfct"></search-input>
         <search-output v-for="output in responses2" v-bind:output="responses2"></search-output>
         <!--
             <div>
             <h2>Ausgabe</h2>
                <ul v-for="response in responses2">
                    <li>
                        @{{ response.ID }}
                    </li>
                </ul>
            </div>
        -->
        </div>
    <script src="js/app.js" charset="utf-8"></script>
    </body>
</html>

app.js file

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));
Vue.component('search-input', require('./components/SearchInput.vue'));
Vue.component('search-output', require('./components/SearchOutput.vue'));

const app = new Vue({
    el: '#app2',
    data: {
        responses2:[]
    },
    methods: {

        searchinputfct(searchinputparam){
        $.ajaxSetup({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        $.ajax({
          type: 'get',
          url: '/livesearch',
          data: {text: searchinputparam},
          datatype: "JSON",
          success: function(data)
          {
              //JSON.parse(data);
              JSON.stringify(data);
              //console.log(data);
              this.responses2 = data;
              //console.log(typeof(this.responses2));
              //console.log(this.responses2.Object.first_name);
              //console.log(this.responses2);
              //var _len = data.length;
              var _len = this.responses2.length;
              var post, i;

               for (i = 0; i < _len; i++)
                {
                   //debugger
                   post = this.responses2[i];
                   console.log(post.first_name);
                 }
          }
        });

        }
    },
});

MY response: [Object, Object, Object] and i can easily console.log as you can see within the for loop in app.js file but after that i can't refresh my search.blade.php more specificly i can't find a good example with reactiv vue.js My SearchOutput.vue

<template>
    <div id="search-output">
        <p>{{ output.ID }}</p>
        <p>aha</p>
    </div>
</template>

<script>
    export default {
        props: ['output']
    }
</script>

I can't figure out how to display the response within the SearchOuput.vue as <li> or even as a simple <p>. Thanks in advance any help is very much appreciated. :)

Upvotes: 1

Views: 178

Answers (1)

booky
booky

Reputation: 31

My mistake was as Bert Evans said, use of this within the callback function. THANK YOU VERY MUCH Bert Evans <3

methods: {

    searchinputfct(searchinputparam){
    $.ajaxSetup({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    var self = this;
    $.ajax({
      type: 'get',
      url: '/livesearch',
      data: {text: searchinputparam},
      datatype: "JSON",
      success: function(data)
      {
          //JSON.parse(data);
          //console.log(data);
          //self.responses2 = JSON.stringify(data);
          self.responses2 = data;
          console.log(self.responses2);
          //console.log(typeof(this.responses2));
          //console.log(this.responses2.Object.first_name);
          //console.log(self.responses2);
          //var _len = data.length;
          /*
          var _len = data;
          var post, i;
          console.log(_len);
           for (i = 0; i < _len; i++)
            {
               //debugger
               post = data;
               //console.log(self.responses2[i]);
               //console.log(post.first_name);
             }
             */
      }
    });

    }

},

Upvotes: 1

Related Questions