ludo1960

ludo1960

Member Since 1 Year Ago

Experience Points
3,170
Total
Experience

1,830 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
3,170 XP
Oct
06
1 month ago
Activity icon

Started a new Conversation Vue-router Query Params

hello,

I have a route defined so:

  {
    path: '/newModule/:id',
    component: () =>
      import(/* webpackChunkName: "newModule" */ './NewModule/NewModuleId.vue').then((m: any) => m.default),
  },

Say I wanted to add "?user=john to the url? The docs say:

this.$router.push({ path: '/newModule/:id', query: { user: 'john' }})

The result I get is http://localhost:3000/newModule/:id?user=john but what I want is http://localhost:3000/ah;h;oiah;oh;aoihoh?user=john

what am I doing wrong?

Oct
01
1 month ago
Activity icon

Replied to Make List Item A Link

Perfect, that ":" is a pest, I keep running into gotchas for the simple stuff. Guess i'm learning though! Many thanks for your help.

Activity icon

Replied to Make List Item A Link

Nearly,

links are rendered so:

<a href="'/recipes?id='+ recipe.id">Super easy vegetarian pasta bake</a>

A wee syntax error?

Activity icon

Replied to Make List Item A Link

recipes?id=d15cd487-bba0-44d2-9620-1ffbe482256f

Activity icon

Started a new Conversation Make List Item A Link

Hi guys,

I have a list generated by:

        <ul>
          <li v-for="recipe in recipes" v-bind:key="recipe.id">{{ recipe.attributes.title }}</li>
        </ul>

I would like to make it a linked list, so each link becomes like below

Sep
26
1 month ago
Activity icon

Started a new Conversation Axios Data From JSON Endpoint

Hi guys,

I have the following JSNO endpoint:

{
    "jsonapi": {
        "version": "1.0",
        "meta": {
            "links": {
                "self": {
                    "href": "http://jsonapi.org/format/1.0/"
                }
            }
        }
    },
    "data": [
        {
            "type": "node--page",
            "id": "97ca30f4-0022-4b61-bee3-96452ed631d2",
            "attributes": {
                "title": "Just a test",

My axios script is :

<script>
import axios from "axios";

export default {
  name: "app",
  data() {
    return {
      posts: []
    };
  },
  created() {
    axios
      .get("http://mysite.com/api/posts")
      .then(response => {
        this.posts = response.data.data.map(post => {
          return {
            id: post.id,
            title: post.attributes.title
          };
        });
      })
      .catch(e => {
        console.log(e);
      });
  }
};
</script>

and in my template I have :

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts" v-bind:key="post.id">
        <p>
          <strong>{{ post.title }}</strong>
        </p>
      </li>
    </ul>
  </div>
</template>

but nothing prints out and I get no errors in console, what am I doing wrong?

Aug
03
3 months ago
Activity icon

Started a new Conversation Template For Nuxt/axios Api Call

Hi Guys,

with the kind help of Daniel, my last post https://laracasts.com/discuss/channels/general-discussion/axios-call-on-nested-json-api-data I was able to advance my learning of vue.js. The final code looked like this:

export default {
  name: 'app',
  data () {
    return {
      posts: []
    }
  },
  created () {
    axios.get('http://myexample.com/api/node/page').then((response) => {
      this.posts = response.data.data.map((post) => {
        return { id: post.id, title: post.attributes.title, body: post.attributes.body.value }
      }
    )
    })
    .catch((e) => {
      console.error(e)
    })
  }
}

and in the output template:

        <ul v-if="posts && posts.length">
        <li v-for="post of posts" v-bind:key="post.id">
        <h1><p><strong>{{ post.title }}</strong></p></h1>
        <p class="subheading font-weight-regular"><span v-html="post.body"></span></p>
        </li>
        </ul>

Now I would like to have a go using NUXT:

import axios from 'axios'

export default {
  asyncData ( { error }) {
    return axios.get(`https://myexample.com/api/node/page`)
    .then((res) => {
      return { id: res.data.data.id }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

How do I output the data in a template?

Aug
01
3 months ago
Activity icon

Replied to Axios Call On Nested JSON Api Data

It works, many thanks Daniel, great answer! The body text show html

tags, is there a way to format it as html?

Activity icon

Replied to Axios Call On Nested JSON Api Data

so now I have:

  created() {
    axios.get('http://myexample.com/api/node/page').then((response) => {
      this.posts = response.data.data.map((post) => {
        return {title: post.attributes.title, body: post.attributes.body};
      }
    ) 
    })
    .catch((e) => {
      console.error(e)
    })
  }

and for template I have:

        <ul v-if="posts && posts.length">
        <li v-for="post of posts" v-bind:key="post.id">
        <p><strong>{{ title }}</strong></p>
        <p>{{ body }}</p>
        </li>
        </ul>

Nothing prints out, how to bind the post.id ?

Activity icon

Replied to Axios Call On Nested JSON Api Data

Didn't work, so I tried:

  created() {
    axios.get('http://myexample.com/api/node/page').then((response) => {
      this.posts = response.data
      return {id: post.data.id, title: post.data.attributes.title, body: post.data.attributes.body}
    })
    .catch((e) => {
      console.error(e)
    })
  }

and for template:

        <ul v-if="posts && posts.length">
        <li v-for="post of posts" v-bind:key="post.id">
        <p><strong>{{ title }}</strong></p>
        <p>{{ body.value }}</p>
        </li>
        </ul>
Activity icon

Replied to Axios Call On Nested JSON Api Data

oops just re-read my post, forgot to add the template output:

        <ul v-if="posts && posts.length">
        <li v-for="post of posts" v-bind:key="post.id">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
        </li>
        </ul>

I need to retrieve the data and display it

Activity icon

Started a new Conversation Axios Call On Nested JSON Api Data

Hi guys,

Im following a tutorial http://blog.vuejoy.com/4-axios/ to make an axios call to a JSON api. The code works fine when I call the source as given in the tutorial. Howevr my JSON data has a nested structure. here is the code to make the call:

  created() {
    //axios.get('http://jsonplaceholder.typicode.com/posts').then((response) => {
    axios.get('http://myexample.com/api/node/page').then((response) => {
      this.posts = response.data
     })
    .catch((e) => {
      console.error(e)
    })
  }

and here is the structure of the data I want to grab:

{
    "jsonapi": {
        "version": "1.0",
        "meta": {
            "links": {
                "self": {
                    "href": "http://jsonapi.org/format/1.0/"
                }
            }
        }
    },
    "data": [
        {
            "type": "node--page",
            "id": "c6bf24a8-8556-4c55-b7eb-cb387dbb36f5",
            "attributes": {
                "status": true,
                "title": "API Test",         //// this here
                "body": {
                    "value": "<p>Here is some content</p>\r\n",   ///// and this here
                    "format": "rich_text",
                    "processed": "<p>Here is some content</p>",
                    "summary": ""
                },

I want to grab the title and the body value, what is the proper format for making the call?

Thanks in advance