v-for with simple array code example
Example 1: loop dictionary with key and value javascript
const object = {'a': 1, 'b': 2, 'c' : 3};
for (const [key, value] of Object.entries(object)) {
console.log(key, value);
}
Example 2: vue v-for
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
Example 3: for of array javascript
let colors = ['red', 'green', 'blue'];
for (const color of colors){
console.log(color);
}
Example 4: react create pillbox for each chunk of array
const brandGroups = brandNames.map((e, i) => {
return i % chunkSize === 0 ? brandNames.slice(i, i + chunkSize) : null;
}).filter(e => { return e; });
const renderBrandsItems = () => {
const ThreePlusBrands = `${brandNames.slice(0, 3).join(", ")} + ${brandNames.length - 3} more`;
if (brandGroups.length <= 3) {
return brandGroups.map((item, i) => {
return (
<div key={i}>
<SelectionLabel>
{item}
<ClearIcon
className="fa fa-times"
data-name={item}
onClick={handleBrandClick}
/>
</SelectionLabel>
</div>
);
});
}
return (
<SelectionLabel>
{ThreePlusBrands}
<ClearIcon className="fa fa-times" onClick={onClearBrands} />
</SelectionLabel>
);
};
Example 5: vuejs v-for array index
<ul>
<li v-for="(game, index) in games"></li>
</ul>