All these while I had been using AngularJS to populate dynamic rows on table from JSON array. Now that it is deprecating soon at the end of 2021. It is time I try something else, and I had chosen to try Vue.js
By running the code above you will see an output like this
One important thing to note here is that unlike AngularJS or perhaps earlier version of Vue.js. You are unable to populate values into HTML attribute.
<a href="www.google.com/search?q={{ item.fruit }}">
{{ item.fruit }}
</a>If you do that, you will get an error saying
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
You can fix it with either method below
<a v-bind:href="'https://www.google.com/search?q='+item.fruit">
{{ item.fruit }}
</a>or
<a :href="'https://www.google.com/search?q='+item.fruit">
{{ item.fruit }}
</a>I personally prefer the colon shorthand as it is shorter.
