1904162

That 5-minute video that starts on clicking created a video at vuejs.org/v2/guide/index.html actually took a lot longer than five minutes for me to complete as I was coding the application being demonstrated as I went along.

The video demonstrated the following concepts and features.

1. {{item}} Referencing Vue variables in HTML. Instantiating the Vue object.
2. Adding more parameters in the Vue object instance declaration, following data: created(), and computed, although the created() method that was supposed to fetch data from a server did not work. The computed item defined a function that summed up one column of an array, the total product quantities.
3. v-for="product in products" Inside the <li> tag, loops through an array (products) to display different child items (each named product).
4. v-model.number="product.quantity" Binding a numeric variable with an HTML input element.
5. v-if="product.quantity===0" For conditional display of an HTML element; this was specified on a <span> element to show "OUT OF STOCK" when quantity was zero.
6. @click="product.quantity+=1" event action for a button element: adding 1 to product quantity.

Vue also has a command line interface (CLI), where you can type for instance, vue init webpack myproject at command prompt to initialize files for a project.

The application demonstrated in the video was supposed to show something like this (see above).

The total products was supposed to change accordingly. But after coding it didn’t work as such. I later took time out to investigate and debug the issues. There were two major issues I wanted to resolve, the non-display of the product quantity sum, and non-display of data fetched from a server. After a lot of trials and exploration I fixed both issues.

The sum product quantity was not displaying because of misspelling, my writing totalProduts instead of totalProducts. It was from the browser console that I saw the complaint about it. And the server data that was fetched didn’t display because it wasn’t the right data: I’d written 74163 (numeric) in the URL instead of 74l63 (alphanumeric).

To resolve that server data issue I had to visit myjson.com and read about their service. The portion of the code that referenced the site was

  created(){
    fetch("https://api.myjson.com/bins/74163")
      .then(response=>response.json())
      .then(json=>{
        this.products=json.products
    })
  } 

Myjson is a place you store and retrieve JSON data for use in client-side web and/or mobile applications. To put your JSON data there you simply copy and paste it into the main input window, then you can access your data through the provided link.

As I was checking I visited the link I had typed in the code above and it gave me the following.

 {"editors":{"main":"int a = 0;
int b = 1;

int c = a + b;","harness":"WebAssembly.instantiate(wasmCode, {/* imports */}).then(({instance}) =u003e {
  var memory = instance.exports.memory;
  // call any exported function, e.g. instance.exports.main()
  log(Object.keys(instance.exports));
});"},"compilerOptions":"-Os"} 

That wasn’t a product list at all. It was later that I wondered if I typed the address correctly. The data returned depended on an ID in the link, the value after bins/. I used alpha l (small L) instead of digit 1 and https://api.myjson.com/bins/74l63 returned the following:

 {"products":[{"id":1,"quantity":1,"name":"Compass"},{"id":2,"quantity":0,"name":"Jacket"},{"id":3,"quantity":5,"name":"Hiking Socks"},{"id":4,"quantity":2,"name":"Suntan Lotion"}]} 

This was the right JSON string result. I made the change in the code and then created() was now working because its fetch() was getting the right data.

I also installed the Vue DevTools for Firefox, useful for debugging from the browser console. Later visited www.vuemastery.com/courses/intro-to-vue-js/vue-instance/ from the last page of the introductory video where I had to register to be able to download the first video there, Vue Instance. The video was just playing on the page with no control options.