Error while making a multiselect using vue-select - laravel

I am using vue-select in my project along with tabulator. I was able to fetch data from json file and view it. But when selecting the options i get an error saying " Component emitted event "option:selecting" but it is neither declared in the emits option nor as an "onOption:selecting" prop. ". I could not resolve this error after multiple try. Below is the code.
**<template>
<form>
<div class="container h-25 w-10/12 mx-auto pb-3 border 2 border-gray-300 flex flex-col rounded-md items-left bg-gray-100" >
<label class="px-3 py-1 w-10/12 text-xs text-black font-medium">Employee</label>
<div class="px-2">
<v-select v-model="Selected" multiple :options="options" label="Employee" placeholder="---SELECT---" class="style-chooser"></v-select>
</div>
<!-- <span>Selected: {{ Employee_Id }}</span> -->
</div>
</form>
<!-- <ul><li v-for="item in datas" :key="item.Employee">{{ item.Employee }}</li></ul> -->
</template>
<script>
import dataset from './dataset.json'
export default {
data(){
return {
openCard: false,
Selected: ""
}
},
computed: {
options: () => dataset
},
methods:{
open(){
this.openCard = ! this.openCard
},
},
}
</script>**
Your help is highly appreciated la.

Related

Problem with making dynamic form based on table field in Vue Js

I got the problem in making program for my company, the concept is you can input mark (nilai) for every sector based on kriteria of the mark you had to fill and it has 5 kriteria. the problem is I have to separate the kriteria based on the kriteria name and when I try the array cant be shown
<template>
<div class="space-x-4 sm:-my-px sm:ml-1 sm:flex">
<jet-button #click="getKriteria1">P1</jet-button>
<jet-button #click="getKriteria2">P2</jet-button>
<jet-button #click="getKriteria3">P3</jet-button>
<jet-button #click="getKriteria4">P4</jet-button>
<jet-button #click="getKriteria5">P5</jet-button>
</div>
<div class="mt-4">
<div class="space-x-4 sm:-my-px sm:ml-1 sm:flex" v-if="session === 1" :v-for="(kriteria, index) in kriteria1.data" :key="kriteria.id">
<label>{{kriteria.sub_kriteria}} : </label>
<jet-input type="number" class="mt-1 block w-3/4" placeholder="Nilai"
ref="nilai"
v-model="form.nilai[index]"
#keyup.enter="create" />
<jet-input-error :message="form.errors.nilai" class="mt-2" />
</div>
</div>
</template>
can you guys help me why the kriterias i get cant be show, in the console i can see the kriteria is read and has field but when i try to call it with props it cant be shown and cant be convert to kriteria1
<script>
props: {
penilaians: Array,
kriterias:Array,
},
data() {
return {
session:1,
kriteria1:[],
kriteria2:[],
kriteria3:[],
kriteria4:[],
kriteria5:[],
form:this.$inertia.form({
nilai:[],
foto:[],
status:[],
rekomendasi:[]
}),
}
},
methods:{
getKriteria1(){
this.session = 1;
this.kriteria1 = kriterias;
for(let index=0;index<=kriterias.length;index++){
if(kriterias[index].nama === 'P1'){
this.kriteria1[index].id = kriterias[index].id;
this.kriteria1[index].nama = kriterias[index].nama;
this.kriteria1[index].sub_kriteria = kriterias[index].sub_kriteria;
}
}
},
}
</script>
i erase the component and import in purpose because it will not affect the question i think
the main idea is to filter the 'kriteria' field to spesific values so i made the filter with getKriteria 1 so i can get 'nilai' form for the 'kriteria'
method:{
getKriteria1(){
this.session = 1;
var kriteria = this.kriterias;
var j=0;
for(var i=0;i<= kriteria.length;i++){
if(kriteria[i].nama == 'P1'){
this.kriteria1[j] = kriteria[i];
j++;
}
}
},
}
this is the jetstream template of the program :
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="space-x-4 sm:-my-px sm:ml-1 sm:flex" :v-on:show ="getPenilaianId()">
<jet-button v-on:click.prevent="getKriteria1()" >P1</jet-button>
<jet-button v-on:click.prevent="getKriteria2()" >P2</jet-button>
<jet-button v-on:click.prevent="getKriteria3()" >P3</jet-button>
<jet-button v-on:click.prevent="getKriteria4()" >P4</jet-button>
<jet-button v-on:click.prevent="getKriteria5()" >P5</jet-button>
</div>
<div class="mt-4">
<div v-if="session === 1">
<div v-for="item in kriteria1" :key="item.id" :v-on:show="getKriteriaId(item.id-1)">
<div v-if="item === null"> Tidak ada Kriteria </div>
<label>{{item.nama}} - {{item.sub_kriteria}}</label>
<jet-input type="number" class="mt-1 block w-3/4" placeholder="Nilai"
ref="nilai"
v-model="form.nilai[item.id-1]"
#keyup.enter="create" />
<jet-input-error :message="form.errors.nilai" class="mt-2" />
</div>
</div>
</div>

Laravel JetStream get user avatar

I am sure it is because Ive been staring at this for hours off and on that I am missing something silly. I am trying to pull the avatar of the username in question. The :alt="user.name" is working just fine but the avatar isn't.
I am using Laravel with Jetstream to make this work. I have it working in other places but not here. What am I doing wrong?
<td class="px-2 py-2 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" :src="user.profile_photo_url" :alt="user.name" />
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
{{ user.name }}
</div>
<div class="text-sm text-gray-500 dark:text-gray-100">
User Location
</div>
</div>
</div>
</td>
and script info
<script>
import {DotsVerticalIcon, BanIcon, AtSymbolIcon, UserAddIcon, HashtagIcon, UserCircleIcon, ExclamationIcon, ShieldCheckIcon} from '#heroicons/vue/outline';
import { Menu, MenuButton, MenuItem, MenuItems } from '#headlessui/vue';
import UserProfileSlideout from './UserProfileSlideout.vue';
export default {
components: {
DotsVerticalIcon,
Menu,
MenuButton,
MenuItem,
MenuItems,
BanIcon,
AtSymbolIcon,
UserAddIcon,
HashtagIcon,
UserCircleIcon,
ExclamationIcon,
ShieldCheckIcon,
UserProfileSlideout,
},
data: function () {
return {
showUserProfileSlideout: false,
}
},
name: 'UserListItem',
props: ['user'],
methods: {
showUserProfile() {
this.showUserProfileSlideout = !this.showUserProfileSlideout;
},
}
}
</script>
make sure you enable profilePhotos
in the jetstream config
'features' => [
// Features::termsAndPrivacyPolicy(),
Features::profilePhotos(), // <-------- this
// Features::api(),
// Features::teams(['invitations' => true]),
Features::accountDeletion(),
],
also, make sure you link your storage
using this command :
php artisan storage:link

Why doesn't infinite-loading-vue3 work in a Laravel Project?

I am having a problem using this library in a Vue file. The project is being done with InertiaJS and Laravel.
The controller is composed of the following code:
public function getSaldosContables()
{
$saldocontables = SaldoContable::paginate(10);
return response()->json($saldocontables);
}
And the Vue file contains the following code:
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Listado</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div id="app" #scroll.passive="scrollear">
<infinite-scroll
#infinite-scroll="loadDataFromServer"
:message="message"
:noResult="noResult"
>
<div>
<div
v-for="repo in saldocontables"
:key="repo.idsaldocont"
style="margin-bottom: 20px"
>
<div>
<img :src="repo.idsaldocont" alt="" style="height: 50px" />
</div>
<div>{{ repo.nombresaldocont }}</div>
</div>
</div>
</infinite-scroll>
</div>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from "#/Layouts/AppLayout";
import InfiniteScroll from "infinite-loading-vue3";
import axios from "axios";
export default {
components: {
AppLayout,
InfiniteScroll,
},
data() {
return {
saldocontables: [],
page: 1,
noResult: false,
message: "",
};
},
methods: {
async loadDataFromServer() {
try {
const result = await axios.get("/obtenerSaldos?page=" + this.page);
if (result.data.data.length) {
console.log(this.page);
this.saldocontables.push(...result.data.data);
this.page++;
} else {
this.noResult = true;
this.message = "No result found";
}
} catch (err) {
this.noResult = true;
this.message = "Error loading data";
}
},
},
mounted() {
this.loadDataFromServer();
},
};
</script>
The Laravel route file handles the following encoding:
Route::get('/obtenerSaldos', [SaldoContableController::class, 'getSaldosContables']);
The data loaded in the database is rendered correctly. The problem is generated when the Infinite Scroll must load the following pages with the respective data. When it reaches the end of the page, it remains only loaded with the data of Page 1 and does not update the data contained in the following pages taking into account the pagination returned by the Backend.
This can be seen in the following image:
If I delete the following lines from my Vue:
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Listado</h2>
</template>
</app-layout>
The Template responds correctly and the Infinite Scroll also works perfectly.
You can see it in the following image:
The problem is that by doing this in the view the components that refer to the Side Menu, Top Menu, Responsive Menu, etc. do not appear.
I appreciate any help you can give me.

Vue.js 3 - Add list items from component dynamically

I am new to vue, I found some examples but I could not reproduce in my situation.
I have some inputs user will fill out and once it clicks the button, the information will populate a list of items. I am trying to crete < li > with a OrderListItem component. But I am getting this error:
runtime-core.esm-bundler.js?5c40:217 Uncaught ReferenceError: machines is not defined
at eval (OrderListItem.vue?fb66:14)
Here is the form
<template>
<div>
<div class="flex flex-col mb-4 md:w-full m-1">
<label for="planter_model_id">Planter</label>
<select v-model="registration.planter_model_id" name="planter_model_id">
<option disabled selected>Planter</option>
<option v-for="planter in planters" :key="planter" :value="planter.id">{{planter.brand.name}} {{planter.name }}</option>
</select>
</div>
<div class="flex flex-col mb-4 md:w-full m-1">
<label class=" for="lines">Lines</label>
<Input v-model="registration.lines" type="number" name="lines" />
</div>
<Button type="button" #click="addItemOrder">Add</Button>
</div>
<div>
<ul>
<OrderListItem :machines="machines" />
</ul>
<div>
</template>
Here is my code
export default {
components: {
OrderListItem,
Button,
},
props: {
planters:{
type:Array,
required: true
},
},
data() {
return {
machines: [], //this what I wish to be passed to OrderListItem component
registration:{
lines:null,
planter_model_id:null,
},
}
},
methods:{
addItemOrder(){
let item = {}
item.planter_model_id = this.registration.planter_model_id
item.lines = this.registration.lines
this.machines.push(item)
}
}
};
And here is my OrderListItem component that I created on another file:
<template>
<li v-for="machine in machines" :key="machine">
<div class="flex-initial w-3/5">
<p>Planter: {{machine.planter_model_id}}</p>
<p>Lines: {{machine.lines}}</p>
</div>
</li>
</template>
<script>
export default {
name: 'OrderListItem',
props:{
machines,
}
}
</script>
I don’t know if it is relevant but I am using vue3 and laravel.
I am very newbie here and from what I learned I think if machines array was a prop I would be able to access it on my component. But I will dynamically add a and remove itens from machines array and I think props receive data from server so It should not be declared there, that why I declared inside data().
Thanks =)
You should define the prop by adding its type and default value :
export default {
name: 'OrderListItem',
props:{
machines:{type:Array,default:()=>[]},
}
}

Passing the Div id to another vue component in laravel

I created a simple real-time chat application using vue js in laravel.
I am having a problem with the automatic scroll of the div when there is a new data.
What I want is the div to automatically scroll down to the bottom of the div when there is a new data.
Here is my code so far.
Chat.vue file
<template>
<div class="panel-block">
<div class="chat" v-if="chats.length != 0" style="height: 400px;" id="myDiv">
<div v-for="chat in chats" style="overflow: auto;" >
<div class="chat-right" v-if="chat.user_id == userid">
{{ chat.chat }}
</div>
<div class="chat-left" v-else>
{{ chat.chat}}
</div>
</div>
</div>
<div v-else class="no-message">
<br><br><br><br><br>
There are no messages
</div>
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
</div>
</template>
<script>
export default {
props: ['chats','userid','adminid'],
}
</script>
ChatComposer.vue file
<template>
<div class="panel-block field">
<div class="input-group">
<input type="text" class="form-control" v-on:keyup.enter="sendChat" v-model="chat">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" v-on:click="sendChat">Send Chat</button>
</span>
</div>
</div>
</template>
<script>
export default{
props: ['chats','userid','adminid'],
data() {
return{
chat: ''
}
},
methods: {
sendChat: function(e) {
if(this.chat != ''){
var data = {
chat: this.chat,
admin_id: this.adminid,
user_id: this.userid
}
this.chat = '';
axios.post('/chat/sendChat', data).then((response) => {
this.chats.push(data)
})
this.scrollToEnd();
}
},
scrollToEnd: function() {
var container = this.$el.querySelector("#myDiv");
container.scrollTop = container.scrollHeight;
}
}
}
</script>
I am passing a div id from the Chat.vue file to the ChatComposer.vue file.
As you can see in the ChatComposer.vue file there is a function called scrollToEnd where in it gets the height of the div id from Chat.vue file.
When the sendchat function is triggered i called the scrollToEnd function.
I guess hes not getting the value from the div id because I am getting an error - Cannot read property 'scrollHeight' of null.
Any help would be appreciated.
Thanks in advance.
the scope of this.$el.querySelector will be limited to only ChatComposer.vue hence child component can not able to access div of parent component #myDiv .
You can trigger event as below in ChatComposer
this.$emit('scroll');
In parent component write ScollToEnd method and use $ref to assign new height
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid" #scroll="ScollToEnd"></chat-composer>
..

Resources