When the country is selected, the country flag must be displayed in select option. I need to do that in Vue.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
select: null,
countries: [
{
name: "Albania",
flag: "em-flag-al"
},
{
name: "Anguilla",
flag: "em-flag-ai"
}
],
}
})
<div id="app">
<v-app class="container">
<v-select
v-model="select"
:items="countries"
label="Select"
item-text="name"
>
<template v-slot:item="slotProps" >
<i :class="['mr-2', 'em', slotProps.item.flag]"></i>
{{slotProps.item.name}}
</template>
</v-select>
</v-app>
</div>
Or you can refer to https://codepen.io/aaha/pen/ZEbRwpy?editors=1010
You can use another slot for the selection :)
<template v-slot:selection="slotProps">
<i :class="['mr-2', 'em', slotProps.item.flag]"></i>
<span>{{ slotProps.item.name }}</span>
</template>
Related
I wanted to read the data from the database and display it in the app.
I'm calling it like this :
<h2 class="lowongan1" v-for="value in list_lowongan"> {{ value.title }}</h2>
<p class="descJob1" v-for="value in list_lowongan">{{ value.body }}</p>
The script
export default {
data() {
return {
'form': {
title: '',
body: '',
},
list_lowongan: []
};
},
mounted() {
console.log('on mounted');
axios.get('post/list').then((response) => {
console.log(response.data)
this.list_lowongan = response.data
}).catch((error) => {
console.log(error)
});
},
The problem is, when I call it like that, It displays all the title in the database and the body in the database tables.
How can I make it so that it only display 1 title for each h2 class ?
Use a wrapping div to hold your content and then loop over the div like so:
<div v-for="value in list_lowongan">
<h2 class="lowongan1"> {{ value.title }}</h2>
<p class="descJob1">{{ value.body }}</p>
</div>
You have two for-loops independent of each other so they'll stack by themselves
You just need one for-loop to display a list of where each title and body are together
You can form it this way:
<div v-for="value in list_lowongan">
<h2>{{ value.title }}</h2>
<p>{{ value.body }}</p>
</div>
As per your requirement, No need to use multiple v-for loops for same data iteration. Instead you can achieve that by applying v-for in a wrapper element and then prints the object values inside that wrapper element.
Live Demo :
new Vue({
el: '#app',
data: {
list_lowongan: []
},
mounted() {
this.list_lowongan = [{
title: 'Title 1',
body: 'Body 1'
}, {
title: 'Title 2',
body: 'Body 2'
}, {
title: 'Title 3',
body: 'Body 3'
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(value, index) in list_lowongan" :key="index">
<h2>{{ value.title }}</h2>
<p>{{ value.body }}</p>
</div>
</div>
I want to display data in chips using selectBox, but I got a problem while displaying these items like this:
My TS:
selectedPointsForts: any[]=[];
listPointsForts: any[]=[];
SelectPointsForts() {
this.PointsFortsService.findAll().then((res) => {
this.listPointsForts= res.map(function(obj: any) {
return {
value: {
id: obj.id,
name: obj.libelle
},
label: obj.libelle
};
});
});
}
My HTML:
<p-multiSelect [options]="listPointsForts" [(ngModel)]=" selectedPointsForts" [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=2></p-multiSelect>
<p>Selected Cars: </p>
<p-chips [(ngModel)]=" selectedPointsForts" > </p-chips>
Can anyone help me to fix this problem !
You can place pTemplate in <p-chips> element to format the chip items' displayed output.
<p-chips [(ngModel)]="selectedPointsForts">
<ng-template let-item pTemplate="item">
{{ item.id }} - {{ item.name }}
</ng-template>
</p-chips>
Sample Solution on StackBlitz
Output
References
Chips (Custom Content)
I need to display both swiper (https://www.npmjs.com/package/swiper) and cdkDrag (https://material.angular.io/cdk/drag-drop/overview) functions for a group of elements.
The problem is that when I use the swiper, cdkDrag stops working.
Maybe I am doing something wrong, or the swiper does not support cdkDrag.
Here is my code html :
landing.component.html
<!-- Swiper -->
<div [hidden]="appListService?.normalAppList?.length <= 0" class="bg-white landing-apps-footer">
<div class="landing-apps-container">
<swiper [config]="config" (click)="onPaginationClick($event)" #usefulSwiper>
<div id="landing-apps-detail-list" class="fh swiper-wrapper app-list" cdkDropList draggable="true"
(cdkDropListDropped)="drop($event)" [cdkDropListData]="appListService.normalAppList"
[cdkDropListConnectedTo]="firstList" #secondList="cdkDropList" cdkDropListOrientation="horizontal">
<div class="swiper-slide pop" *ngFor="let dataItem of appListService.normalAppList" cdkDrag (cdkDragStarted)="onDragStarted()">
<a class="apps {{dataItem.icon}}" (click)="gotoAppPage(dataItem)" draggable="false"
style="cursor: pointer;">
<span class="icon"></span>
<span class="title"
id="landing-detailApp{{ dataItem.appCode }}">{{ dataItem.appName }}</span>
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next" id="landing-btnNext"></div>
<div class="swiper-button-prev"></div>
</swiper>
</div>
</div>
Here is my code typescript :
config: SwiperOptions = {
pagination: { el: '.swiper-pagination', clickable: true },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
spaceBetween: 30,
loop: false,
loopFillGroupWithBlank: false, //hide/show virtual items
initialSlide: 0, // Slide Index Starting from 0
slidesPerView: 6, // Slides Visible in Single View Default is 1
slidesPerGroup: 6,
on: {
init: function () {
console.log('swiper initialized');
},
slideChange: function () {
console.log('swiper slideChange');
},
touchMove: function () {
console.log('swiper Move');
},
tap: function () {
console.log('tap');
},
touchStart: function () {
console.log('touchStart');
},
},
};
Please let me know if anyone has encountered a similar problem and was able to configure cdkDrag support (https://material.angular.io/cdk/drag-drop/overview) for swiper (https://www.npmjs.com/package/swiper) in Angular 2+
I'm beginner in Ajax and I'm using Laravel 8. I want to remove row that from database but when I try this code it's removing first row but it needs to remove the returned id row. How can I remove the row?
My blade is:
<div class="anime__review__item" id="testp" >
<div class="anime__review__item__pic">
<img src="<?=url('/')?>/images/avatars/{{$comment->user->photo}}" alt="">
</div>
<div class="anime__review__item__text" >
<h6><a href="{{route('getProfile', ['username'=> $comment->user->username])}}" >{{$comment->user->name }}</a></a><span >{{$comment->created_at->diffForHumans()}}</span></h6>
<p> {{$comment->comment }}</p>
<p class="card-text"><span class="icon_trash" type="button" data-id="{{ $comment->id }}" data-target="#default{{ $comment->id }}"></span></p>
</div>
</div>
My ajax is:
$(".icon_trash").click(function(event){
event.preventDefault();
var id = $(this).data("id");
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "{{ route('deleteComments',['id' => $comment->id]) }}",
type: 'POST',
data: {
_token: "{{ csrf_token() }}",
id: id
},
success: function (){
$("#testp").remove();
},
error: function(){
alert('errorr');
},
})
}
})
});
My controller is:
public function deleteComments($id){
$deletedata= Comment::findOrFail($id);
$deletedata->delete();
if($deletedata){
return response()->json(['status'=>'testss']);
}else{
return back();
}
}
Since all divs have same ID, you have this issue. To solve, have unique IDs and unique removals as below:
Have dynamic value for div ID as:
<div class="anime__review__item" id="testp_{{ $comment->id }}">
Remove the respective ID accordingly in your ajax code as:
$("#testp_{{ $comment->id }}").remove();
This way, you correctly remove the parent div of the respective deleted comment.
I am getting a GET request from my api to disply all users , and i want to modify maybe the name of the email of each users with a modal. The problem is , imagine i have 3 users displayed , 3 modals will be displayed even if i press on only one modal button.
How can i do to fix it ?
there is my code :
<template>
<div class="container">
<div>
<h1>
<b> Users </b>
<input
type="text"
v-model="search"
class="search"
placeholder="Search User"
/>
</h1>
</div>
<div class="overlay-container">
<form>
<div class="form-group">
<div
v-for="user in filterUser"
v-bind:key="user"
class="form-control"
>
<p>
<b>{{ user.fname }} </b> {{ user.lname }}
</p>
<b-button v-b-modal.modal-1>Modifiy</b-button>
<b-modal id="modal-1" title="User Modification">
<p class="my-4">Please edit informations</p>
</b-modal>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
name: "users",
data() {
return {
search: "",
users: [],
};
},
computed: {
filterUser() {
return this.users.filter((user) => {
return user.fname.match(this.search);
});
},
},
created() {
axios
.get(`http://localhost:4000/api/users`)
.then((Response) => (this.users = Response.data.data));
},
};
</script>
I want to each users open his own modal, not all modals when i press only one modal button.
I hope its clear !
First, pull out the modal inside of v-for, then create a method to get your user index, and add it to the Modify button. this is how you can get the data a user without sending another HTTP Request. and then you can show this.user data in your modal as you want.
<div
v-for="(user, index) in filterUser"
v-bind:key="user"
class="form-control"
>
<p>
<b>{{ user.fname }} </b> {{ user.lname }}
</p>
<b-button
v-b-modal.modal-1
#click="getUserInfo(index)"
>
Modifiy
</b-button>
</div>
data() {
return {
search: "",
users: [],
user: {}
};
},
methods: {
getUserInfo(index) {
this.user = this.users[index]
}
}