DEV Community: Gathoni Stone

Props in Vue.js

Gathoni Stone — Tue, 07 Apr 2020 23:56:26 +0000

First, What even are props?😕
According to the official Vue.js docs:

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.

This basically means that props are how we pass data between components; from parent components to child components.

In this post, we're going to look at some of the concepts of Vue.js props.

Let's dive in

Defining Props
For a component to register a prop, it has to first define it in its props property.

In a Vue instance,

Vue.component('todo', {
  props: ['task'],
  template: '<p>Pending {{ task }}</p>'
})

In a Vue component file,

<template>
  <p>Pending {{ task }}</p>
</template>

<script>
export default {
  name: 'Todo',
  props: ['task']
}
</script>

Passing data using props

Passing a static value

For a component to use the prop, include it as you would a HTML attribute

<Todo task="Learn about Vue.js props"/>

What if you want to pass more than one prop to the component instance? Simple, append the extra props to the array.

<template>
  <p>Pending {{ task }} at {{time}}</p>
</template>

<script>
export default {
  name: 'Todo',
  props: ['task', 'time']
}
</script>

Rendering the component

<Todo task="Learn about Vue.js props" time="10:10 am"/>

Passing a dynamic value

<template>
  <div>
     <Todo v-bind:task='task' v-bind:time='time'/> // 
  </div>
</template>

<script>
export default {
   data(){
        return {
               task: "Learn about Vue.js props",
             }
}
</script>

Passing an array

<template>
  <div>
    <Todo 
        v-bind:key="task.id" 
        v-for="task in tasks" 
        v-bind:task="task.task" 
        v-bind:time="task.time"
    >

    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      tasks: [
        { id: 1, task: 'Learn about Vue.js props', time: '10:10am' },
        { id: 2, task: 'Go for a walk', time: '06:00pm' },
        { id: 3, task: 'Sleep', time: '11.00pm' }
       ]
    }
  }

Prop types
It's always a good thing to define the data types of your props. When props passed don't match the defined type, Vue complains by throwing an error in the console.
To set prop types, you list the props as an object with the properties names as keys and types as values.

 props: {
        taskId: Number,
        task: String,
        time: String,
        tags: Array,
        isCompleted: Boolean,
        markComplete: Function
     }

To learn more about props, visit the official Vue.js documentation page Vue.js docs

My #100daysofcode challenge so far

Gathoni Stone — Tue, 31 Mar 2020 12:14:22 +0000

Hello👋
So on 20th March 2020, I committed to doing Alexander Kallaway's #100days of code challenge and let's be honest, I'm tired😫😴😂.

Photo by Milada Vigerova on Unsplash

What I've been doing
Wikipedia Viewer from freecodecamp take-home projects.
Local Weather App also from freecodecamp take-home projects.
The Odin Project FullStack JavaScript track

Resources I'm finding useful

Freecodecamp Learn to code with free online courses, programming projects, and interview preparation for developer jobs.
The Odin Project A web development website with different tracks to follow.
30 seconds of code Short JavaScript code snippets that can be understood in less than 30 seconds.
Tomato Timer A pomodoro clock I'm using to time myself and take breaks when necessary.

My Key Takeaways

Giving up is not an option. You'll feel like it but just don't do it.
Pace yourself, it's not a sprint.
Plan ahead. Without planning you end up stranded and wasting a lot of time deciding on what to do.

In conclusion, Have fun with the challenge💃💃, your mental health is just as important.

How I'm taking the #100DaysOfCode challenge

Gathoni Stone — Sat, 21 Mar 2020 16:43:22 +0000

So last year I decided to join the [100 days of code challenge].

It did not go as expected 😶

I did it for a week and stopped altogether. 100 days seemed really intimidating at the time. After an invitation by a friend to take the challenge together, here I am doing it again, this time... a little bit differently.

I realize the main reason I failed the last time was because I did not hold myself accountable. Therefore, I'm going to be documenting my journey through blog posts. For every 10 days, I'll be summarizing everything I've done and what I've learned, an idea I got from Sarah Bartley's post.

100 Days of Code: First 10 Days of Round Two

Sarah Bartley ・ Jun 12 '19 ・ 10 min read

#100daysofcode

What will I be doing for the 100 days? 💭

This was the hardest part!

After scouring the internet for ideas and checking out what other people have done for the challenge, I have finally settled on doing the freecodecamp take-home projects. I chose these projects mainly because they have clearly defined instructions and did not want to spend time creating my own problems then solve them. The projects also have already written tests which will be helpful in determining if my projects are working as required.

The PLAN😎

Start Date: Saturday,21st March 2020
step 1: Fork this github repo

kallaway / 100-days-of-code

Fork this template for the 100 days journal - to keep yourself accountable (multiple languages available)

I've joined the #100DaysOfCode Challenge

Translations

বাংলা - català - 中文 - deutsch - español – français – italiano – 日本語 - 한국어 – norsk – polski - português do Brasil - русский – українська - ελληνικά - srpski

If you want to help by providing a translation of content/rules in the language you know, submit a pull request (or DM me on Twitter @ka11away ), adding a sub-folder in the 'intl' folder with the files of the translation there.

If you've decided to join:

Check out the Official Site for the #100DaysOfCode movement. Connect with others on the platform of your choice from this list: www.100DaysOfCode.com/connect Also, here is a invite link to the 100DaysOfCode Slack channel
Read Join the #100DaysOfCode
Fork this repo and commit to the Log or to the Alternative, rapid R1 Log (R1 stands…

View on GitHub

step 2: Commit progress to the log.md file.

step 3: Code for at least an hour each day.

Sidenote: My mentioned ☝️ friend and I have a WhatsApp group where we'll basically be updating our daily progress - to keep ourselves accountable.

Conclusion

This is my first post on this journey. The next will be after 10 days into the 100 days.
Hopefully, I'll make it to then😄.