Vuejs Course


List of items with v-for with data from array

You can use the v-for directive to render a html list of items based on an array.

Syntax:
<ul id='idul'>
 <li v-for='item in items'>{{ item }}</li>
</ul>
- items is the source data array.
- item is an alias for the array element being iterated on.

Example:
<ul id='idul'>
 <li v-for='item in items'>{{ item }}</li>
</ul>

<script>
const ul_items =[ 'Mar', 'Plo' ];

var vm = new Vue({
 el:'#idul',
 data: {
 items: ul_items
 }
});
</script>

v-for also supports an optional second argument for the index of the current item.
Syntax:
<ul id='idul'>
 <li v-for='(item, index) in items'>{{ index }} - {{ item. }}</li>
</ul>

Example:
<ul id='idul'>
 <li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>

<script>
const ul_items =[ 'Mar', 'Plo' ];

var vm = new Vue({
 el:'#idul',
 data: {
 items: ul_items
 }
});
</script>
You can also use of as the delimiter instead of in, so that it is closer to JavaScript's syntax:
<ul id='idul'>
 <li v-for='item of items'>{{ item }}</li>
</ul>

v-for with an object

You can also use v-for to iterate through the properties of an object. In the syntax you can use in or of.
<ul id='idul'>
 <li v-for='val in obj'>{{ val }}</li>
</ul>

<script>
const ul_obj ={
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
}

var vm = new Vue({
 el:'#idul',
 data: {
 obj: ul_obj
 }
});
</script>

You can also add a second argument for the property's name (key).
Syntax:
<ul id='idul'>
 <li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>

Example:
<ul id='idul'>
 <li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>

<script>
const ul_obj ={
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
}

var vm = new Vue({
 el:'#idul',
 data: {
 obj: ul_obj
 }
});
</script>

When it is used an object, v-for supports a third argument for index.
Syntax:
<ul id='idul'>
 <li v-for='(val, key, index) in obj'>{{index}} - {{ key }} : {{ val }}</li>
</ul>

Example:
<ul id='idul'>
 <li v-for='(val, key, ix) in obj'>{{ ix }} - {{key}}: {{ val }}</li>
</ul>

<script>
const ul_obj ={
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
}

var vm = new Vue({
 el:'#idul',
 data: {
 obj: ul_obj
 }
});
</script>

v-for - detecting changes in source

When it is added, deleted or changed an item in the used array or object, Vue will update the list of elements.
You can use the JavaScript methods for Array and Objects. Test and study the following examples.

1. Adding new item at the beginning of the list:
<div id='demo'>
<button v-on:click='addMsg'>Add item</button>
<ul id='idul'>
 <li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 items: [ 'Mar', 'Plo' ]
 },
 methods:{
 addMsg:function(ev){
 this.items.unshift('Hello');
 }
 }
});
</script>
2. Delete the element from the beginning of the list:
<div id='demo'>
<button v-on:click='delFirst'>Delete First item</button>
<ul id='idul'>
 <li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 items: [ 'Mar', 'Plo' ]
 },
 methods:{
 delFirst:function(ev){
 this.items.shift();
 }
 }
});
</script>
3. Modify a specified element of a list with items from an object:
<div id='demo'>
Change language: <input type='text' v-on:input='setLang'/>
<ul id='idul'>
 <li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 obj: {
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
 }
 },
 methods:{
 setLang:function(ev){
 this.obj.language = ev.target.value;

 //Or with this code
// this.$set(this.obj, 'language', ev.target.value);
 }
 }
});
</script>

Data for list directly in v-for

You can add the array or object with items directly in the construction of the v-for directive.

1. Example with array in v-for:
<ul id='idul'>
 <li v-for='item in ["Mar", "Plo", "site"]'>{{ item }}</li>
</ul>

<script>
var vm = new Vue({
 el:'#idul'
});
</script>
2. Example with object in v-for:
<ul id='idul'>
 <li v-for='(val, key) in {"Tutorial":"Vue JS", "Code":"JavaScript"}'>{{ key }} - {{val}}</li>
</ul>

<script>
var vm = new Vue({
 el:'#idul'
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Creating Lists with v-for

Last accessed pages

  1. SSEP - Site Search Engine PHP-Ajax (9767)
  2. Get and Modify content of an Iframe (24448)
  3. Add Pause in JavaScript script (13886)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (22404)
  5. PHP Unzipper - Extract Zip, Rar Archives (8803)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (428)
  2. The School for Gods (321)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (206)
  4. Add, Change, and Remove Attributes with jQuery (197)
  5. PHP Unzipper - Extract Zip, Rar Archives (194)