<b-collapse :id="`news-${news.id}`" visible>
<span v-html="getNewsExcerpt(news.body).newsText"></span>
</b-collapse>
<b-collapse :id="`news-${news.id}`">
<span v-html="news.body" ></span>
</b-collapse>
<a href="javascript:void(0)" v-if="getNewsExcerpt(news.body).isExcerpt" v-b-toggle="`news-${news.id}`">
<span class="is-opened">Show more text</span> <span class="is-closed">Show less text</span>
</a>
<div class="text-center" v-show="moreExists">
<button type="button" class="btn btn-primary btn-sm" v-on:click="loadMore">Load more...</button>
</div>
methods: {
getNewsExcerpt (news) {
let excerpt = (news.length > 100) ? true : false
return {
newsText: news.substring(0,100) + "...",
isExcerpt: excerpt,
}
},
loadMore: async function() {
await axios.get('/news/get?page='+this.nextPage)
.then(response => {
this.moreExists =response.data.meta.current_page < response.data.meta.last_page;
this.nextPage = response.data.meta.current_page + 1;
response.data.data.forEach(data => {
this.allnews.push(data);
});
})
.catch(err => {
console.error(err)
this.showErrorNotification()
})
}
},
<style scoped>
.collapsed > .is-opened,
:not(.collapsed) > .is-closed {
display: none;
}
</style>
When I click on Load more news, if in text is Show more text it changes in Show less text and I didnt click on that Load more it affects the buttons below the text..Can anyone help me? I tried to do on so many ways and nothing helped with this code in Vue.
Related
I have a project when I'm using Laravel 7.3 + Vue.
I am trying to assign a company to an internal employee. When I click the "Assign Company" button everything is fine and I can select the company in a select box, but when I click the "Save Company" button now, I can see the change in my database, but I don not see the changes live in my view/template, I need to refresh the webpage to see the assigned company.
This is my File.vue between the <template>:
<td><h4 v-if="editEmpleado" class="text-black-50">{{EmpleadosInterno.empresa}}</h4>
<select v-else class="form-control" id="Cliente" v-model="ClienteSeleccionado">
<option v-for="Cliente in Clientes"
:key="Cliente.id"
:value="Cliente">{{Cliente.nombreempresa}}</option>
</select>
</td>
<td>
<a v-if="editEmpleado" type="button" class="btn btn-primary" v-on:click="onClickEdit()">
Assign Company
</a>
<button v-else type="button" class="btn btn-success" v-on:click="onClickUpdate()">
Save Company
</button>
</td>
And this is my script
export default {
props: ['EmpleadosInterno'],
data() {
return {
ClienteSeleccionado: {},
Clientes: [],
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
editEmpleado: true
}
},
mounted() {
axios.get('/Clientes').then((response) => {
this.Clientes = response.data;
},
);
},
methods: {
onClickEdit() {
this.editEmpleado = false;
},
onClickUpdate() {
const params = {
nombreempresa: this.ClienteSeleccionado.nombreempresa
}
axios.put(`/EmpleadosInternos/${this.EmpleadosInterno.id}`, params).then((response) => {
const EmpleadosInterno = response.data;
this.$emit('update', EmpleadosInterno);
this.editEmpleado = true;
});
},
This is my services.vue
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-md-12">
<h2 class="text-primary">Empleados Registrados:</h2>
<table class="table table-bordred table-striped ">
<thead>
<tr>
<th>Nombre</th>
<th>Telefono</th>
<th>Empresa</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<empleadocomponente-component
v-for="(EmpleadosInterno, index) in EmpleadosInternos"
:key="EmpleadosInterno.id"
:EmpleadosInterno="EmpleadosInterno"
#update="updateEmpleadosInterno(index, ...arguments)"
#delete="deleteEmpleadosInterno(index)">
</empleadocomponente-component>
</tbody>
</table>
</div>
</div>
</div>
<script>
export default {
data(){
return {
EmpleadosInternos: [],
}
},
mounted() {
axios.get('/EmpleadosInternos').then((response) => {
this.EmpleadosInternos = response.data;
},
);
},
methods: {
updateEmpleadosInterno(index, EmpleadosInterno){
this.EmpleadosInternos[index] = EmpleadosInterno;
},
deleteEmpleadosInterno(index){
this.EmpleadosInternos.splice(index, 1);
}
}
}
</script>
i had implement the click event for the chart and it can filter the data in the table. But now i face the problem of the data does not return all the data in the table when click outside the chart are.How can make it return all the data when click outside the area chart? Thank you. Any help will be appreciated.
<script>
import VueApexCharts from "vue-apexcharts";
import faker from "faker";
export default {
components: {
VueApexCharts,
},
data() {
return {
Lists: [],
selectedData:{},
search1:'',
clicked:'',
clicked1:'',
isLoading1:true,
currentPage: 1,
series: [300, 200, 49, 100,290, 228, 119, 55],
chartOptions: {
colors: ['#7961F9', '#FF9F43', '#196EB0', '#2EAB56','#df87f2','#057FF2', '#14DA6E','#FF5500'],
legend: {
fontSize: "14px",
position: "top",
},
dataLabels: {
enabled: true,
minAngleToShowLabel: 0,
distributed: false,
style: {
colors: ['#111'],
},
background: {
enabled: true,
foreColor: '#fff',
borderWidth: 0,
}
},
chart: {
width: 500,
type: 'pie',
events: {
legendClick: (chartContext, seriesIndex,w, config) => {
this.clicked = w.config.labels[seriesIndex];
console.log(this.clicked);
console.log(seriesIndex);
},
dataPointSelection: (event,chartContext,config) => {
this.clicked1 = config.w.config.labels[config.dataPointIndex];
console.log(this.clicked1);
},
},
},
labels: ['Private', 'Local','Dental', 'Government','Cyber Security', 'Health', 'Foreign','Medical'],
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
fontSize: "12px",
},
},
},
],
},
}
},
created() {
this.getData();
this.getData1();
},
computed:{
filterLists(){
let list = this.Lists;
if(this.search1 !=''){
list = list.filter((tr)=>{
return tr.agency.toUpperCase().includes(this.search1.toUpperCase())
});
}
if (this.clicked !=''&& this.clicked){
list = list.filter((tr)=>{
return tr.projectCategory.toUpperCase().includes(this.clicked.toUpperCase())
});
}
if (this.clicked1 !=''&& this.clicked1){
list = list.filter((tr)=>{
return tr.projectCategory.toUpperCase().includes(this.clicked1.toUpperCase())
});
}
return list;
},
},
methods: {
next(page) {},
getData1() {
this.isLoading1 = true;
for (let i = 0; i < this.randInt(8, 4); i++) {
let index = Math.floor(Math.random() * 2);
let projectCategory = this.rotate([
'Private', 'Local','Dental', 'Government','Cyber Security', 'Health', 'Foreign','Medical'
]);
this.Lists.push({
projectCategory:projectCategory,
project_name: faker.company.catchPhrase(),
agency: faker.company.companyName(),
logo: faker.image.abstract(),
});
}
this.maxPage = 2;
this.isLoading1 = false;
},
next1(page) {
if (page == -2) {
this.currentPage = 1;
} else if (page == -3) {
this.currentPage = this.maxPage;
} else {
if (
this.currentPage + page < 1 ||
this.currentPage + page > this.maxPage
) {
return;
}
this.currentPage += page;
}
this.showLoader("#card-list");
this.Lists = [];
this.isLoading1 = true;
setTimeout(() => {
this.closeLoader("#card-list");
this.getData1();
}, 1500);
},
},
};
</script>
<style>
#card > header{
padding: 1.5rem 2rem;
background-color: #2E3839;
}
#card{
--tw-bg-opacity: 1;
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}
.con-img.vs-avatar--con-img img {
object-fit: cover !important;
}
.apexcharts-toolbar {
position:absolute;
margin-right:12px;
}
vs-button.btn:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;
}
</style>
<template>
<div class="mb-base">
<div class="vx-row mb-base">
<div class="vx-col 2/3 w-full mb-base">
<vs-card
id="card"
class="vs-con-loading__container h-full"
>
<template slot="header">
<div class="flex">
<div>
<img
src=""
alt="Info"
class="h-12 inline-block mr-4 object-scale-down"
/>
</div>
<div class="flex flex-col justify-center w-full text-start">
<h3 class="text-white">Source of Fund</h3>
<span class="text-sm text-white">Based on Total Billed (Yearly)</span>
</div>
<div>
</div>
</div>
</template>
<div class="flex flex-wrap mt-2">
<div class="lg:w-1/3 w-full">
<vue-apex-charts
type="donut"
:options="chartOptions"
:series="series"
width="100%"
class="items-center justify-center flex mt-16 content-center"
/>
</div>
<div class="lg:w-2/3 w-full lg:pl-6 pl-0 mt-6">
<div class="flex justify-end items-end">
<vx-input-group class="mb-base lg:w-1/2 w-full">
<template slot="append">
<div class="append-text btn-addon">
<vs-button color="#A9A9A9"><i class="fas fa-search"></i></vs-button>
</div>
</template>
<vs-input
v-model="search1"
placeholder="Project Code or name"
/>
</vx-input-group>
</div>
<div id="card-list">
<vs-list v-if="!isLoading1">
<vs-list-item
v-for="(tr, index) in filtertLists"
:key="index"
class="hover:shadow cursor-pointer text-base mb-4"
>
<template slot="title">
<div
class="flex flex-col ml-2 cursor-pointer"
>
<div class="font-bold">{{ tr.project_name }}</div>
<div>{{ tr.agency }}</div>
</div>
</template>
<template slot="avatar">
<vs-avatar :src="tr.logo"></vs-avatar>
</template>
{{ tr.projectCategory }}
</vs-list-item>
<div v-if="!filterLists.length" class="flex">
<div class="items-center justify-center text-lg font-bold">No record...</div>
</div>
</vs-list>
<div v-else class="flex">
<div class="items-center justify-center">Fetching data...</div>
</div>
</div>
<div class="flex justify-end gap-4">
<div class="flex items-center justify-center text-sm">
Page {{ currentPage }} of
{{ maxPage }}
</div>
<div>
<vs-button
type="filled"
color=" rgba(243, 244, 246)"
class="w-10 mr-2 rounded-md bg-gray-400 text-black btn hover:text-black"
#click="next1(-1)"
>
<i class="fas fa-chevron-left"></i>
</vs-button>
<vs-button
type="filled"
color=" rgba(243, 244, 246)"
class="w-10 mr-2 rounded-md bg-gray-400 text-black btn"
#click="next1(1)"
>
<i class="fas fa-chevron-right"></i>
</vs-button>
</div>
</div>
</div>
</div>
</vs-card>
</div>
</div>
</div>
</template>
I am working with laravel vue pie chart. is there any way to filter the data in the table when click the element of pie chart. For example, when clicked the section pie chart, the table will be filter and display the the data in the table under that section..Any help will be appreciated
It is not possible to point directly to a solution as you have given so little detail. I will still try to explain the logic. For this process, you will get an input from the screen working with Vue.js and you will manipulate a data displayed on Vue.js.
So first; you need to know which part of your pie chart clicked on. I assume the pie chart you are using on your project have some events which triggered when you interact with charts. You will listen that event and catch the value of clicked item.
Now you have the value of clicked item and you need to filter your results by that.
To accomplish that you can use Vue.js Computed Properties and Watchers :https://v2.vuejs.org/v2/guide/computed.html
Lets say you have your data on your Vue.js application:
data () {
return {
clickedItem: null,
itemsOnTable: [ ... ]
}
}
You have all your table content in itemsOnTable and selected item's data in clickedItem
You can use computed to filter your data:
data () {
return {
clickedItem: null,
itemsOnTable: [ ... ]
}
},
computed: {
// filter itemsOnTable if clickedItem have any value
filteredItems: function () {
if(this.clickedItem==null) return this.itemsOnTable;
return this.itemsOnTable.filter(item => item.column = this.clickedItem);
}
}
Now in your Vue.js component you can directly use filteredItems for your table elements v-for
<table>
<tr v-for="items in filteredItems">
<td>{{ item.column }}</td>
<!-- other columns -->
</tr>
</table>
This examples explains basics of interactions and computed properties and aims to help you to understand basics.
I am following up this guide https://www.codechief.org/article/real-time-chat-app-with-laravel-6-vue-js-and-pusher#gsc.tab=0 to create real-time chat app in Laravel and Vue.
But it does not show list of active user.
Also this span never shows
<span class="text-muted" v-if="activeUser" >{{ activeUser.first_name }}` is typing...</span>
Also, this method does not work properly because in console log it shows undefined is typing...
sendTypingEvent() {
Echo.join('chat')
.whisper('typing', this.user);
console.log(this.user.fist_name + ' is typing now')
}
And it is not actually real time, because I see new messages only if I reload page.
This is Vue component
<template>
<div class="row">
<div class="col-8">
<div class="card card-default">
<div class="card-header">Messages</div>
<div class="card-body p-0">
<ul class="list-unstyled" style="height:300px; overflow-y:scroll" v-chat-scroll>
<li class="p-2" v-for="(message, index) in messages" :key="index" >
<strong>{{ message.user.first_name }}</strong>
{{ message.message }}
</li>
</ul>
</div>
<input
#keydown="sendTypingEvent"
#keyup.enter="sendMessage"
v-model="newMessage"
type="text"
name="message"
placeholder="Enter your message..."
class="form-control">
</div>
<span class="text-muted" v-if="activeUser" >{{ activeUser.first_name }} is typing...</span>
</div>
<div class="col-4">
<div class="card card-default">
<div class="card-header">Active Users</div>
<div class="card-body">
<ul>
<li class="py-2" v-for="(user, index) in users" :key="index">
{{ user.first_name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['user'],
data() {
return {
messages: [],
newMessage: '',
users:[],
activeUser: false,
typingTimer: false,
}
},
created() {
this.fetchMessages();
Echo.join('chat')
.here(user => {
this.users = user;
})
.joining(user => {
this.users.push(user);
})
.leaving(user => {
this.users = this.users.filter(u => u.id != user.id);
})
.listen('ChatEvent',(event) => {
this.messages.push(event.chat);
})
.listenForWhisper('typing', user => {
this.activeUser = user;
if(this.typingTimer) {
clearTimeout(this.typingTimer);
}
this.typingTimer = setTimeout(() => {
this.activeUser = false;
}, 1000);
})
},
methods: {
fetchMessages() {
axios.get('messages').then(response => {
this.messages = response.data;
})
},
sendMessage() {
this.messages.push({
user: this.user,
message: this.newMessage
});
axios.post('messages', {message: this.newMessage});
this.newMessage = '';
},
sendTypingEvent() {
Echo.join('chat')
.whisper('typing', this.user);
console.log(this.user.fist_name + ' is typing now')
}
}
}
</script>
"Also, this method does not work properly because in console log it shows undefined is typing..."
i assume you made a typo in your console.log, you probably meant:
this.user.first_name
Concerning your "realtime" problem, i suspect it might be because your broadcasted Event is being queued, so you might want to use the ShouldBroadcastNow instead of ShouldBroadcast
I have a list of nested comments. Under each comment, I'd like to add a "reply" button that, when click, show a reply form.
For now, everytime I click a "reply" button, it shows the form. But the thing is, I'd like to show only one form on the whole page. So basically, when I click on "reply" it should close the other form alreay opened and open a new one under the right comment.
Edit :
So I was able to make some slight progress. Now I'm able to only have one active form opening on each level of depth in the nested loop. Obviously, what I'm trying to do now is to only have one at all.
What I did was emitting an event from the child component and handle everything in the parent component. The thing is, it would work great in a non-nested comment list but not so much in my case...
Here is the new code:
In the parentComponent, I have a handleSelected method as such:
handleSelected (id) {
if(this.selectedItem === id)
this.selectedItem = null;
else
this.selectedItem = id;
},
And my childComponent:
<template>
<div v-if="comment">
<div v-bind:style=" iAmSelected ? 'background: red;' : 'background: none;' ">
<p>{{ comment.author.name }}<br />{{ comment.created_at }}</p>
<p>{{ comment.content }}</p>
<button class="button" #click="toggle(comment.id)">Répondre</button>
<button class="button" #click="remove(comment.id)">Supprimer</button>
<div v-show="iAmSelected">
<form #submit.prevent="submit">
<div class="form-group">
<label for="comment">Votre réponse</label>
<textarea class="form-control" name="comment" id="comment" rows="5" v-model="fields.comment"></textarea>
<div v-if="errors && errors.comment" class="text-danger">{{ errors.comment[0] }}</div>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
<div v-if="success" class="alert alert-success mt-3">
Votre réponse a bien été envoyée !
</div>
</form>
</div>
</div>
<div v-if="comment.hasReply">
<div style="margin-left: 30px;">
<comment v-for="comment in comments"
:key="comment.id"
:comment="comment" #remove-comment="remove"
:is-selected="selectedItem" #selected="handleSelected($event)">
</comment>
</div>
</div>
</div>
</template>
<script>
import comment from './CommentItem'
export default {
name: 'comment',
props: {
isSelected: Number,
comment: {
required: true,
type: Object,
}
},
data () {
return {
comments: null,
fields: {},
errors: {},
success: false,
loaded: true,
selectedItem: null,
}
},
computed: {
iAmSelected () {
return this.isSelected === this.comment.id;
}
},
methods: {
remove(id) {
this.$emit('remove-comment', id)
},
toggle(id) {
this.$emit('selected', id);
},
handleSelected(id) {
if(this.selectedItem === id)
this.selectedItem = null;
else
this.selectedItem = id;
},
},
mounted(){
if (this.comment.hasReply) {
axios.get('/comment/replies/' + this.comment.id)
.then(response => {
this.comments = response.data
})
}
}
}
</script>
Thanks in advance for your help!
I'm actually working on profile picture for users.
I now want to put this profil picture next to their name in my chat which is working with pusher and vuejs.
My img is like this :
<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt="">
I can not just past it in the file it's not working and it would be for every user, but I want it to be for the auth user. I'm kinda new to vue.js any help would be thankful.
This is my chatMessage.vue :
<template>
<ul class="chat messages" >
<li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
classForUser: (message.user.id === currentuserid),
classForNotUser: (message.user.id !== currentuserid)}" >
<div class="chat-body clearfix" >
<div class="header">
<strong class="primary-font"
v-bind:class="{
classForAuthorSameAsUser: (message.user.id === currentuserid),
classForAuthorDiffThanUser: (message.user.id !== currentuserid)
}">
{{ message.user.firstName }}
{{ message.user.lastName}}
:
</strong>
{{ message.human_readable_time}}
</div>
<p>{{ message.message }}</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages','currentuserid']
};
</script>
<style scoped>
.classForAuthorSameAsUser {
color: lightseagreen ;
}
.classForAuthorDiffThanUser {
color: black;
}
.classForUser{
width: 70%;
left: 30%;
}
.classForNotUser{
width: 70%;
}
</style>
And this is the html of my chat :
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div class="col-md-12 col-md-offset-2">
<div class="panel-body panel-content" id="mess_cont" :userid="{{Auth::user()->id}}">
<chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>
</div>
<div class="panel-footer">A
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}">
</chat-form>
</div>
</div>
</div>
</div>
I think I have to use again the thing that help me to get the user id, but I don't really know how it works with vue.js.
Thanks for your time
And now I have this :
<template>
<ul class="chat messages" >
<li class="clearfix list-group-item" v-for="message in messages" v-bind:class="{
classForUser: (message.user.id === currentuserid),
classForNotUser: (message.user.id !== currentuserid)}" >
<div class="chat-body clearfix" >
<div class="header">
<strong class="primary-font"
v-bind:class="{
classForAuthorSameAsUser: (message.user.id === currentuserid),
classForAuthorDiffThanUser: (message.user.id !== currentuserid)
}">
<img class="profil_pic" :src="`path/to/uploads/logo_${user.firstName}_${user.lastName}.png`" alt="Auth image"/>
{{ message.user.firstName }}
{{ message.user.lastName}}
:
</strong>
{{ message.human_readable_time}}
</div>
<p>
{{ message.message }}
</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages','currentuserid'],
data() {
return {
user: null,
}
},
methods: {
this:$http.get('/api/get-auth')
.then((response) => {
this.user = response.data.auth
})
.catch((error) => {
// handle error
}),
}
};
</script>
<style scoped>
.classForAuthorSameAsUser {
color: lightseagreen ;
}
.classForAuthorDiffThanUser {
color: black;
}
.classForUser{
width: 70%;
left: 30%;
}
.classForNotUser{
width: 70%;
}
</style>
And it's not working
As I see, what you want to achieve is to take this img tag (with blade's logic):
<img class="profil_pic" src="{{url('uploads/logo_'.Auth::user()->firstName."_".Auth::user()->lastName.".png")}}" onerror="this.src='images/user.jpg'" alt="">
And put it inside your chatMessage.vue component. If that's it, you can do so like this:
1. Create a function inside a controller in order to return the authenticated user information:
public function getAuth()
{
return response()->json([
'auth' => auth()->user(),
], 200);
}
2. Create a new route in order to get that information inside your api.php file:
Route::get('/get-auth', 'YourController#getAuth');
3. Create a new param inside the data() returned object in the chatMessage.vue component:
data() {
return {
user: null,
}
},
4. Create a method inside your chatMessage.vue component with the necessary code to fetch that data:
fetchAuth() {
this.$http.get('/api/get-auth')
.then((response) => {
this.user = response.data.auth
})
.catch((error) => {
// handle error
});
}
5. Call that method inside your created() life cycle method:
created() {
this.fetchAuth();
}
6. Create the img tag like this:
<img class="profil_pic" :src="`path/to/uploads/logo_${user.firstName}_${user.lastName}.png`" alt="Auth image"/>