Getting Into the Programming Mindset

It's been difficult for me to get back into the programming mindset. I had to just go somewhere out of my normal environment and force myself to go through the tutorial that I'm working through. I'm glad I'm pushing through it, because once I got to programming and solving problems, I liked it and got satisfaction from figuring things out.

Episode 6

Here's the learning resource that I'm currently working through. The coding challenge I did was at the last part of Episode 6:

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/6

I imagined an approach and then worked to figure out how to do it step by step. The example was to have three lists of tasks:

• All Tasks
• Incomplete Tasks
• Complete Tasks

The instructor in the video showed how to use computed properties within view to figure out what should be in the "Incomplete Tasks" and "Complete Tasks" lists before displaying them on the page.

Then he had a challenge:

Make it so a button can change if a task is completed or not.

I had an idea of how to do this, but it took me a while to figure out. I couldn't remember how to pass the object I wanted to change to the function in the Vue method. I eventually figured it out with:

<button v-on:click="toggle(task)">Toggle</button>

When the button is clicked, it sends the "task" object to the "toggle" method. Here's the code for the "toggle" method I wrote:

toggle: function (task) {
  if (task.completed === false ) {
      task.completed = true
    } else {
      task.completed = false
    }
  }

I had to figure out that I needed to send the "task" object to the function as an argument (parameter?) and then change whether it was completed or not with an if statement.

See my code on jsFiddle

jsFiddle is a great way to share code and the result. Here's what I ended up with:

https://jsfiddle.net/2hmu4yyh/

If you go there and press the "toggle" button on the All Tasks list, it will change if that task is completed or not and then that is reactively updated in the computed lists for "Incomplete Tasks" and "Complete Tasks".

I also figured out how to make the completed tasks use a different style, making the text green and bold. I accomplished this with the v-bind directive to call a class if the "completed" was true for that task.

After I did all this, which was a good exercise, I found in the comments that some people had shared their solutions on jsFiddle, too. The one I really liked used checkboxes and found a way to use the true or false value of the checkbox to connect with the true or false of the "completed" value in the task object using v-model. That was really good! I had thought about using checkboxes, but wasn't sure how and I definitely wouldn't have thought of the elegant solution that they came up with. Here's that jsFiddle solution that I liked:

https://jsfiddle.net/ug69y13s/1/

Then someone else took that idea and made it look great with some styles:

https://jsfiddle.net/razvantirboaca/9aqsjj30/

I Can Read Code!

One of the great things I realized is that in viewing other people's solutions, I was mostly understanding their code. That's one of my goals is to be able to be familiar enough with this so that I can read other people's code and understand what's going on.

I'm making progress.

Thanks for reading!

-- @matthewdavid