BarryJames

BarryJames

Member Since 8 Months Ago

Experience Points
9,990
Total
Experience

10 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
96
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 2
9,990 XP
Oct
09
1 week ago
Activity icon

Replied to Vuex State Not Reactive Without Page Reload

Nevermind, my mistake..

in store =>

export const "state" - not "store"

(:

Oct
07
2 weeks ago
Activity icon

Started a new Conversation Vuex State Not Reactive Without Page Reload

The problem experiences entails the following setup: Simple Nuxt Intallation v2^ Using Vuetify and Axios

I have already built an advanced app with a lot of extras using a real back-end, but decided to replicate the error on a simple new installation of Nuxt just to be able to create a repo for you guys. So the functionality of this demo might not be clear to you - but in real life the app is using tasks and projects. The user must be able to change the status of each task.

I cannot figure out how to go further with this app if I can't implement this feature. My first thoughts are that it might be a bug with Nuxt / Vue - but I'm hoping someone can tell me I'm wrong!

Seems simple?! Well, 7 Days later and I'm no closer to solving this little bug I am experiencing...

Well for your ease-of-access I have loaded a simple github demo showing just what the problem is with only 3 steps to reproduce the error.

https://github.com/BarryJamez/not-so-reactive-app.git

Steps: Once you have run 'npm run dev' - as follows:

Step 1: Start on the index page (http://localhost:3000)

Step 2: Click on 'View Tasks'

Step 3: Try to change the status of a task by pressing the buttons

Step 4: Now refresh the page and all of a sudden it works.

To repeat this problem, just navigate back to the home page, refresh (reload) the page and start again from step 1

I have tried a lot of things, but none of them worked:

**1. I have moved my entire child component housing the list of comments into the parent component to eliminate the passing of props being the problem.

  1. I have used Vue.set and array.splice instead of just replacing the array item with an index

  2. I have enabled watchers on these computed arrays and set 'deep' to true

  3. I have played around with async and await by removing them and adding them on certain places.

  4. I have used the $nextTick function to see if it was a render issue

  5. I have placed the array in its own parent level state property (although the postId field in a child element in the array) - yet how else can I contain an object in a state - an object must have 'child' elements.

  6. I have referenced the parent component computed properties instead of the props in the child component.**

My Page with the tasks:

<template>
  <v-container fluid>
    <v-row v-for="task in myTasks" :key="task.id">
      <v-col>
        <v-card class="ma-4">
          <v-card-title>{{task.title}}</v-card-title>
          <v-card-text>
            <p>{{task.description}}</p>
            <p class="blue--text">{{task.status}}</p>
          </v-card-text>
          <v-card-actions>

            <v-btn
              v-if="task.status == 'Active'"
              @click="onChangeStatus(task.id, 'Completed')"
            >
              Complete Task
            </v-btn>

            <v-btn
              v-if="task.status == 'Completed'"
              @click="onChangeStatus(task.id, 'Active')"
            >
              Incomplete Task
            </v-btn>

            <v-btn
                v-if="task.status == 'Active'"
              @click="onChangeStatus(task.id, 'Postponed')"
            >
              Postpone Task
            </v-btn>

            <v-btn
              v-if="task.status == 'Postponed'"
              @click="onChangeStatus(task.id, 'Active')"
            >
              Activate Task
            </v-btn>
            
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapState } from 'vuex'

export default {
  async fetch({store, route}) {
    await store.dispatch('tasks/getMyTasks', {
      sid: route.params.sid
    })
  },
  methods: {
    onChangeStatus(taskId, status) {
      this.$store.commit('tasks/changeTaskStatus', {
        taskId: taskId,
        status: status,
      })
    }
  },
  computed: {
    ...mapState({
      myTasks: state => state.tasks.myTasks
    })
  }
}

My store namespaced 'tasks':

export const store = () => ({
  myTasks: []
})

export const mutations = {
  setMyTasks: (state, tasks) => {
    state.myTasks = tasks
  },
  changeTaskStatus: (state, params) => {
    let index = state.myTasks.findIndex(el => {
      return el.id == params.taskId
    })
    state.myTasks[index].status = params.status
  }
}

export const actions = {
  async getMyTasks (vuexContext, params) {
    try {
      let {data} = await this.$axios.$get('/tasks.json')
      vuexContext.commit('setMyTasks', data)
    } catch (e) {
      console.log(e)
    }
  }
}

I don't really want to have to reload the page every time a user lands on it as this defeats the purpose of SSR and SPAs.

IF YOU CAN PICK YOUR BRAIN please checkout the repo on Github and follow the steps above: https://github.com/BarryJamez/not-so-reactive-app.git

Jun
20
4 months ago
Activity icon

Replied to Vuelidate And @blur Not Working Correctly.

After finding an article from 2017... I finally found the answer..

use v-model.lazy="data"

Should anyone run into the same problem. It seems Vuelidate doesn't handle @blur correctly when using an asynchronous validator.

Thanks!

Activity icon

Replied to Vuelidate And @blur Not Working Correctly.

Thanks guys! Although it didn't work..

Can I just find out - when you try something like this does it (@blur) function as expected? I mean using a custom unique validation?

I want to find out perhaps it's my browser or something...

Cheers!

Jun
19
4 months ago
Activity icon

Replied to Vuelidate And @blur Not Working Correctly.

Yep, just did that and still the same results.

      required,
      email,
      unique: function (value) {
        if (value === '') return true
        return new Promise((resolve, reject) => {

          return axiosGuest.get('users/' + this.users[this.selectedUser].id + '/email-exists-exc?email=' + value)
            .then(response => {
              if (response.data.email) {
                return true
              }
            })
            .catch(error => {
              if (error.response.data.error.email[0] == 'The email has already been taken.') {
                return false
              }
              return true
            })
        })
      },
    },
Activity icon

Started a new Conversation Vuelidate And @blur Not Working Correctly.

Hey coders! I'm building a Vue front-end using a Laravel back-end and I seem to have run into a problems:

My @blur event runs properly on every property except for my custom validation 'unique' - which sends a GET request on every keystroke.

I have Googled for days without finding anything that mentions this and would really appreciate your help on this :)

Ok so take into consideration that I pass two props into this component with an array of users and a number containing the selected user's index in that array...

Here is my simplified script in my component for Edit User:

<script>
import { required, email, minLength } from 'vuelidate/lib/validators'
import axios from 'axios'
export default {
  data() {
    return {
      name: this.users[this.selectedUser].name,
      email: this.users[this.selectedUser].email
    }
  },
  props: {
    users: {
      type: Array,
      required: true
    },
    selectedUser: {
      type: Number,
      required: true
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(2)
    },
    email: {
      required,
      email,
      unique: value => {
        if (value === '') return true
        return axios.get('email-exists?email=' + value)
          .then(response => {
            return !response.data
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  },
  methods: {
    updateUser() {
      // axios request...
    }
  }
}

And here is my simplified HTML in my component in Edit User:

<template>
  <form @submit.prevent="updateUser">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" class="form-control" :class="{'is-invalid': $v.name.$error}" @blur="$v.name.$touch()" v-model="name">
      <span v-if="!$v.name.error" class="invalid-feedback" role="alert">
        <strong v-if="!$v.name.minLength">Please enter a valid first name</strong>
        <strong v-if="!$v.name.required">Please enter your first name</strong>
      </span>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" class="form-control" :class="{'is-invalid': $v.email.$error}" @blur="$v.email.$touch()" v-model="email">
      <span v-if="!$v.email.error" class="invalid-feedback" role="alert">
        <strong v-if="!$v.email.email">Please enter a valid email address</strong>
        <strong v-if="!$v.email.unique">This email address already exists</strong>
      </span>
    </div>
    <button type="submit" class="btn btn-primary" :disabled="$v.$invalid">Update User</button>
  </form>
</template>

Thank you in advance! Maybe I am missing something here?