Develop Reference

How do i use the next image components

I uploaded images on image kit , so i can use the image link in my project. I kep getting errors i dont know why . I followed the documentation thoroughly .
Here is my next config file
module.exports = {
images: {
domain: ['ik.imagekit.io'],
},
}
Here is a javascript file that i used to store the images , swhich is then mapped to another file
const vondutch = [
{
id: '0',
name: 'Von dutch pink',
category: 'Shirts',
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
price: 30000,
rating: 4.5,
size: 10,
},
{
id: '1',
name: 'Von dutch blue',
category: 'Shirts',
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
image: "https://ik.imagekit.io/juwoncaleb/l5_ZBzjfMqVE.jpg?ik-sdk-version=javascript-1.4.3&updatedAt=1643717156193",
price: 15000,
brand: 'Adidas',
rating: 4.0,
size: 10,
}
]
export default vondutch;
Here is where the image from the file above is used in a next file
<div class="slides">
<Image
id="slide-1"
class="imagesli"
src={image}
/>
<div>
<Image src={image1} />
</div>
<div id="slide-2">
<Image src={image2} />
</div>
<div id="slide-3">
<Image src={image3} />
</div>
<div id="slide-4">
<Image src={image4} />
</div>
<div id="slide-5">
<Image src={image5} />
</div>
</div>

you may want to map your elements
get array of all URLS-s of images you want to set
var images = [url_1, url_2, url_3...]
and then you should just
<div class="slides">
<Image
id="slide-1"
class="imagesli"
src={image}
/>
{images.map((url, index) => (
<div key={index} id={`slide-${index+1}`} >
<Image src={url} />
</div>
))}
</div>

Responsive select menu does not display array values

I have a navbar that displays values depending on selected tabs
Now I want to do exactly the same in mobile view, for that, I have a select menu instead navbar
But value is not changing
But values are not changing when I select different value, what am I doing wrong? Regards
CodePen
Code:
<template>
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
<option v-for="tab in tabs" :key="tab.name" :selected="tab.current">{{ tab.name }}</option>
</select>
<div >
<div v-for="tab in tabs" #click="changeTab(tab)" :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
{{ tab.id }} - {{ tab.name }} - {{ tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
</div>
</div>
</div>
<div class="hidden sm:block">
<nav class="flex space-x-4 " aria-label="Tabs" >
<a v-for="tab in tabs" #click="changeTab(tab)" :key="tab.name" :href="tab.href" :class="[tab.current ? 'bg-purple-700 text-white' : 'text-purple-700 hover:text-gray-700', 'px-12 py-2 font-medium text-sm rounded-full font-bold text-lg']" >
{{ tab.name }}
</a>
</nav>
</div>
<div class="hidden sm:block">
<div v-for="tab in tabs" #click="changeTab(tab)" :key="tab.name" :href="tab.href" class="px-12" :class="[tab.current || 'hidden']">
{{ tab.id }} - {{ tab.name }} - {{ tab.href }} - {{ tab.title }} - {{tab.imageSrc}}
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const tabs = ref([
{ id: 1 , title: 'test title one', imageSrc:'/programs/test1.png' , content: '', name: 'LOREM', href: '#test1', current: true },
{ id: 2 , title: 'test title two', imageSrc:'/programs/test2.png', content: '', name: 'IPSUM', href: '#test2', current: false },
{ id: 3 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
{ id: 4 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
{ id: 5 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
{ id: 6 , title: 'test title three', imageSrc:'/programs/test3.png', content: '', name: 'PDF', href: '#test3', current: false },
])
const changeTab = (selectedTab) => {
tabs.value.map(t => {
t.id === selectedTab.id ? t.current = true : t.current = false
});
}
return { tabs, changeTab }
},
computed: {
img() {
return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
},
},
}
</script>
<style lang="scss" scoped>
nav {
display: flex;
gap: 20px;
background: #E5E5E5;
border-radius: 20px;
width: 100%;
justify-content: space-between;
}
</style>

Your <select> tag has no binding. Usually you should have a v-bind or at least a change handler to update the data.
Your change handler could look like this:
<select
#change="changeTab($event.target.value)"
>
...
</select>

Creating a 2 level navbar using Vue js

I am trying to create a 2 level navigation bar with this code but when I try to add another children to one of the children in the scrip it won't work. The idea is for the user to go to a second level where he can select other links. It should hover on link in navbar, then go to the 1st level menu and then hover on one of the option to get the 2nd level menu.
<template>
<!-- Top menu -->
<nav
id="mainNav"
class="navbar navbar-expand-md navbar-dark fixed-top"
:class="$route.path==='/home' ? '' : 'bg-primary'"
>
<!-- <div class="rtl-layout" #click="addToggleClass()">RTL</div>-->
<div class="container ">
<router-link class="navbar-brand" to="/home" routerLinkActive="active-link">
<!-- <img src="/static/img/zemle-logo.png" class="img-fluid" width="110" height="37">-->
<h3 class="text-white" >Sospes Logo</h3>
</router-link>
<button
class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul id="main" class="navbar-nav ml-auto main-menu list-unstyled">
<li
#click="menuToggleLink('menuNo'+i);"
class="parent nav-item"
v-for="(menuItem,i) in menus"
:id="'menuNo'+i"
:key="i"
>
<router-link
class="nav-link"
:to="menuItem.state"
v-if="menuItem.type == 'link'"
#click.native="removeCollapseInClass();"
>
{{ menuItem.name }}
</router-link>
<a
v-if="menuItem.type == 'sub'"
class="nav-link"
href="javascript:void(0)"
>
{{ menuItem.name }}
<i :class="menuItem.icon" #click.stop="menuToggle('menuNo'+i)"></i>
</a>
<ul
v-if="menuItem.type == 'sub' && menuItem.children"
class="sub-menu arrow-up list-unstyled" >
<li
class="nav-item"
v-for="(grandchildItem,i) of menuItem.children"
:key="i"
>
<router-link
class="nav-link"
:to="grandchildItem.state"
v-if="grandchildItem.type == 'link'"
#click.native="removeCollapseInClass()"
>
{{ grandchildItem.name }}
</router-link>
</li>
</ul>
</li>
<li>
<div
class="search-form"
click-outside
>
<span
data-target="#search-style-simple"
#click="showSearch()"
>
<i class="fa fa-search"></i>
</span>
<div
class="module-container"
:class="{'search-active': searchactive}"
id="search-style-simple"
>
<form role="search" method="get" class="search-box" action="javascript:void(0);">
<input type="search" class="form-control" placeholder="Search" value="" name="" />
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div><!-- /module-container -->
</div><!-- /module -->
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default{
data(){
return{
searchactive:false,
menus: [
{
state: "/home",
name: "Home",
type:"link"
},
{
state:"",
name:"Pages",
type:"sub",
icon: 'fa fa-caret-down',
children: [
{ state: 'about', name: 'About', type:"link"},
{ state: 'features', name: 'Features', type:"link"},
{ state: 'contact', name: 'Contact', type:"link"},
{ state: 'pricing', name: 'Pricing', type:"link"},
{ state: 'search', name: 'Search', type:"link"},
{ state: 'portfolio-v1', name: 'Products V1', type:"link"},
{ state: 'portfolio-v2', name: 'Products V2', type:"link"},
{ state: 'portfolio-v3', name: 'Products V3', type:"link"}
]
},
{
state:"",
name:"Features",
type:"sub",
icon: 'fa fa-caret-down',
children: [
{ state: 'login', name:'Login', type:"link"},
{ state: 'sign-up', name: 'Sign Up', type:"link"},
{ state: 'thank-you', name: 'Thank You', type:"link"},
{ state: 'maintenance', name: 'Maintenance', type:"link"},
{ state: 'not-found', name: '404', type:"link"}
]
},
{
state:"",
name:"Shop",
type:"sub",
icon: 'fa fa-caret-down',
children: [
{ state: 'product-grid', name:'Product Grid', type:"link"},
{ state: 'product-cart', name: 'Product Cart', type:"link"},
{ state: 'product-checkout', name: 'Product Checkout', type:"link"},
{ state: 'product-detail', name: 'Product Detail', type:"link"}
]
},
{
state:"",
name:"Blog",
type:"sub",
icon: 'fa fa-caret-down',
children: [
{ state: 'blog-listing-sidebar', name:'blog column ', type:"link"},
{ state: 'blog-column3', name: 'Blog Column1', type:"link"},
{ state: 'blog-masonry3', name: 'Blog Masonry', type:"link"},
{ state: 'blog-sidebar', name: 'Blog Sidebar', type:"link"},
{ state: 'blog-detail', name: 'Blog Detail', type:"link"}
]
}
]
}
},
mounted(){
this.onScrollEvent();
},
methods:{
showSearch(){
this.searchactive = !this.searchactive;
},
menuToggleLink(id){
if (document.getElementById(id).classList.contains("open")){
document.getElementById(id).classList.remove("open");
} else if(!document.getElementById(id).classList.contains("open")) {
let elements = document.querySelectorAll(".parent");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('open');
}
document.getElementById(id).classList.add("open");
}
},
addToggleClass(){
document.querySelector("body").classList.toggle("rtl-enable");
},
removeCollapseInClass(){
document.getElementById("navbarCollapse").classList.remove('show');
},
onScrollEvent(){
var headerSticky = document.getElementById('mainNav');
window.onscroll = function() {
if (window.pageYOffset >= 100) {
headerSticky.classList.add("scrollHeader");
} else {
headerSticky.classList.remove("scrollHeader");
}
}
}
}
}
</script>
<style>
.scrollHeader{
background-color: #0B3242;
}
</style>

Bind image from external source

I'm attempting to bind a background image from an external data source through Vue.js. This is what the code looks like:
<div class="image-box border"
:style="{ background: `url(`+ item.image +`) no-repeat center` }"
style="width: 220px; height: 220px">
I've also tried this:
<div class="image-box border"
:style="{ 'backgroundImage': 'url(' + item.image + ')' }">
This is what the url reads like in the app with no error:
background-image: url("http://localhost:8080/assets/images/shoe-1.png");
Any help is appreciated!
Full code:
component -
<template>
<div class="product-card-box border">
<div class="image-box border"
:style="{ background: `url(`+ item.image +`) no-repeat center` }"
style="width: 220px; height: 220px">
<!-- :style="{ 'backgroundImage': 'url(' + item.image + ')' }"> -->
</div>
<div class="info-box border">
<div class="color-info product-info bold">{{item.colors.length}} color</div>
<div class="product-name">
<div class="product-info bold">{{item.name}}</div>
<div class="product-info sub-info">{{item.gender}}'s Shoe</div>
</div>
<div class="product-price">
<div class="product-info sub-info">${{item.price}}</div>
</div>
</div>
</div>
</template>
data -
const data = [
{
name: 'SNKR 001',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 002',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
}
];
export default data;

In data[], use require(path) so that the path is correctly resolved in your template:
image: require('../assets/images/shoe-1.png')

Consider just having one style object. Also, does it have to be a background image? I'm sure you could accomplish the same thing with an img and a class and just making it object-fit.
<div id="app">
<div :style="{
width: '200px',
height: '200px',
'background-image': `url(${backgroundImage}`,
}"/>
</div>
new Vue({
el: "#app",
data: {
backgroundImage: 'http://picsum.photos/g/1200/400?image=30',
},
})
Check this fiddle for the object-fit solution https://jsfiddle.net/caseyjoneal/b5r8fvjq/73/

Render v-for list false order (new added items first) Vue.js

I am new to vue.js (2) and I am working on a mini twitter platform. Currently I am testing to add a new tweet + name to an array. All that is going well except the new added items are placed below of the v-for list. That is standard of course, But I would like to place the new added items on top of the list, so the new tweets are visible at the top.
I don't know how I could achieve this. I am reading the docs but that doesn't help unfortunately.
HTML
<transition-group name="list">
<div class="social-item " v-for="message in messages" :key="message">
<img class="img-responsive img-full" :src="message.image">
<p>
{{ message.message }}
</p>
<div class="platform-twitter" v-if="message.platform == 'fb'">
<strong class="name facebook">
<a :href="message.adress" target="_blank">
<i class="fa fa-facebook"></i> {{ message.name }}
</a>
</strong>
<div class="stats" v-if="message.fblike > 0 || message.share > 0">
<i class="fa fa-thumbs-up"></i> {{ message.fblike }}
<i class="fa fa-share"></i> {{ message.share }}
</div>
</div>
<div class="platform-twitter" v-if="message.platform == 'tw'">
<strong class="name twitter">
<a :href="message.adress" target="_blank">
<i class="fa fa-twitter"></i> {{ message.name }}
</a>
</strong>
<div class="stats" v-if="message.retweets > 0 || message.likes > 0">
<i class="fa fa-retweet"></i> {{ message.retweets }}
<i class="fa fa-star"></i> {{ message.likes }}
</div>
</div>
</div>
</transition-group>
JS
new Vue({
el: '#app',
data: {
message: {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'},
messages: [
{message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'tw'},
{message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'fb'}
]
},
methods: {
addMessage: function() {
if(this.message.message){
this.messages.push(this.message);
this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
}
}
}
});
I've created a simple https://jsfiddle.net/25d813c4/ with the part of my application.

Because push appends items at last.
You can use unshift instead:
this.messages.unshift(this.message)
ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift