cdyap

cdyap

Member Since 4 Months Ago

Experience Points
80
Total
Experience

4,920 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
0
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
80 XP
Jul
20
4 months ago
Activity icon

Replied to Laravel 5.8 And Vue Doesn't Load Component

The cities are already loaded as JSON upon initial loading. I set this up so the code doesn't have to call a function after loading. See controller code below:

public function search_page(){
        $cities = DB::table('cities')->selectRaw("CONCAT(city_name, ', ', province_name) as concatenated_name")->get()->toJson();
        return view('search_test', compact('cities'));
    }

Currently, the cities already load and the select menu is populated.

Activity icon

Replied to Laravel 5.8 And Vue Doesn't Load Component

@extends('layouts.app')

@section('custom_head')
<script type="text/javascript">
    window.__CITIES_LOADED__ = {!!$cities!!}
</script>
@endsection

@section('content')
<div class="container search">
    <alerts></alerts>
    <div class="row">
        <div class="col">
            <h1 class="text-bold mb-5">Search</h1>  
        </div>
        <div class="col-md-10">
            <search-bar></search-bar>   
        </div>
    </div>
</div>
<div class="w-100 mb-5 mt-5"><hr></div>
@endsection

layouts:

<body class="app">
    <div id="app">
        <div class="content-container">
        @yield('content')
        </div>
    </div>
  

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
    <script type="text/javascript" src="{{ mix('js/app.js') }}" defer></script>
    <script type="text/javascript" src="{{ mix('js/main.js') }}"></script>
    @yield('custom_js')
Jul
19
4 months ago
Activity icon

Started a new Conversation Laravel 5.8 And Vue Doesn't Load Component

Hello everyone! Trying to test Vue on Laravel 5.8. So far, the page loads data using Vue but doesn't respond to any modifications after loading.

Please find my code below. Upon loading, the select dropdown of cities works fine and loads through Vue/JS. After loading though, the form submits normally (i.e. through an HTML request instead of AJAX). I also added a test "message" variable that should supposedly get updated when the button is clicked but nothing happens.

On Chrome Vue Devtools, the component isn't detected. In the console however, i see the "Component mounted." alert.

i've also run "npm run watch" so the files are updated.

Please help me, thanks!

app.js

require('./bootstrap');

window.Vue = require('vue');
Vue.config.devtools = true

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('alerts', require('./components/Alerts.vue').default);
Vue.component('search-result', require('./components/SearchResult.vue').default);
Vue.component('search-bar', require('./components/SearchBar.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

var search = new Vue({
    el: '#app',
});

Imported app.js into the last line of my body already

Component file:

<template>
    <div class="row p-2">
        <alerts :alert="alerts"></alerts>
        <div class="search-bar bg-white rounded col">
            <span v-model="message">{{message}}</span>
            <form @submit.prevent="send">
                <div class="row">
                    <div class="col mb-3">
                        <select name="q[]" id="" class="form-control search-dropdown custom-select custom-select-lg" required v-model="fields.q">
                            <option selected disabled>Select a city</option>
                            <option v-for="city in cities">{{city.concatenated_name}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <button type="button" class="btn option" id="profession-btn" style="padding-left:5px!important;">Filter professions <img src="icons/caret-down-solid.svg" class="icon-caret"></button>
                        <button type="submit" class="btn gradient-button float-right">Find professionals</button>
                    </div>
                </div>
            </form>
            <button @click="test">Test</button>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                cities: JSON.parse(JSON.stringify(window.__CITIES_LOADED__)),
                alerts: {},
                fields: {},
                message: "HELLO",
            }
        },
        methods: {
            send(e) {
                e.preventDefault();
                
                window.axios.post('/search', this.fields).then(response => {

                    alert('Message sent!');
                }).catch(error => {
                    if (error.response.status === 422) {
                    this.alerts = error.response.data.errors || {};
                }
                });
            },
            test() {
                console.log("Hi");
            }
        },
        mounted() {
            console.log('Component mounted.')
        },
        components: {

        }
    }
    function City({concatenated_name}) {
        this.concatenated_name = concatenated_name;
    }
</script>