vue components doesn't return value - javascript

I have created this component and use $emit to call getNames from other file:
<div class="mt-1 relative rounded-md shadow-md">
<input
v-model="ticker"
#keydown.enter="addClick"
#input="getNames"
type="text"
name="wallet"
id="wallet"
class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
placeholder="DOGE"
/>
</div>
<div class="flex bg-white shadow-md p-1 rounded-md shadow-md flex-wrap">
<span
class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer"
v-for="t of getNames()"
:key="t.name"
#click="pushName(t)"
>
{{ t }}
</span>
</div>
import addButton from "./addButton.vue";
export default {
components: {
addButton,
},
data() {
return {
ticker: "",
};
},
methods: {
addClick() {
this.$emit("add-ticker", this.ticker);
this.ticker = "";
},
getNames(){
this.$emit("get-name", this.ticker);
}
It's working but it doesn't return value to my component and I don't get list of names, it worked successful without component. In other file i have this code:
<add-ticker #get-name="getNames" #add-ticker='addClick'/>
getNames(ticker) {
let filtred = this.coinNames.filter((filtered) =>
filtered.toUpperCase().startsWith(ticker.toUpperCase())
);
console.log(filtred.slice(0,4))
return filtred.slice(0, 4);

Related

How can I make my Header listen to the Scroll event on vue3?

I have a fixed navbar which shows itself when you scroll up and fades when you scroll down. I made it on a Javascript file. The code is really simple:
const body = document.body;
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.scrollY;
if (currentScroll <= 0) {
body.classList.remove('scroll-up');
}
if (currentScroll > lastScroll && !body.classList.contains('scroll-down')) {
body.classList.remove('scroll-up');
body.classList.add('scroll-down');
}
if (currentScroll < lastScroll && body.classList.contains('scroll-down')) {
body.classList.remove('scroll-down');
body.classList.add('scroll-up');
}
lastScroll = currentScroll;
})
What I'm trying to do is the same on a big Vue proyect, but I don't know how, my only approach was to put this on the nav => #scroll="handleScroll" => And the logic in the but nothing happens though, if anyone can help me it would be appreciated!
This is the Header comp , its donje with the Composition API btw
<template>
<Disclosure
as="nav"
class="bg-white w-full border-b-2 border-disabled"
v-slot="{ open }"
>
<div class="max-w-screen-2xl mx-auto w-full">
<div class="flex justify-between w-full h-20">
<div class="flex py-3 mx-auto justify-around w-90">
<div class="flex py-3 w-full justify-between">
<div class="flex flex-row">
<router-link to="/">
<img
class="w-20 mr-5"
:src="require('../assets/img/Frame#2x.png')"
alt="logo"
/></router-link>
<div
class="hidden sm:mt-2 sm:ml-6 sm:flex sm:items-center sm:space-x-8"
>
<router-link
v-for="link in navigation"
:key="link.name"
v-slot="{ isExactActive }"
:to="link.href"
>
<div
class="flex flex-col items-center gap-1 capitalize cursor-pointer"
:class="[
isExactActive
? 'text-primary font-semibold'
: 'text-secondary text-opacity-50'
]"
>
{{ t(link.name) }}
<span
:class="[
'w-2 h-2 rounded-full',
isExactActive ? 'bg-pink' : 'bg-transparent'
]"
/>
</div>
</router-link>
</div>
</div>
</div>
<div class="flex my-auto ml-auto flex-row gap-4 sm:mr-4">
<button
v-for="lang in Language"
:key="lang"
#click="setLanguage(lang)"
class="p-0.5 w-10 h-10"
:class="{
' border-2 rounded-full border-pink': selected === lang
}"
>
<img
class="w-8 h-8"
:src="require(`../assets/img/${lang}.png`)"
alt="lang"
/>
</button>
</div>
<div class="hidden md:flex my-auto flex-row gap-4 buttons-container">
<a
class="block w-full px-8 py-2 text-md font-medium bg-transparent border-2 border-pink rounded-xl text-pink sm:w-auto hover:text-red-accent hover:border-red-accent focus:outline-none focus:ring"
:href="`${appDomain}/login`"
>
{{ t('navbar.buttons.signIn') }}
</a>
<a
class="block w-full px-8 py-2 text-md font-normal text-white rounded-xl border-2 border-transparent shadow bg-accent sm:w-auto focus:outline-none"
:href="`${appDomain}`"
>
{{ t('navbar.buttons.join') }}
</a>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
<DisclosureButton
class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
<XIcon v-else class="block h-6 w-6" aria-hidden="true" />
</DisclosureButton>
</div>
</div>
</div>
<DisclosurePanel class="sm:hidden">
<div class="pt-2 pb-3 space-y-1 ring-none outline-none">
<a
v-for="link in navigation"
:key="link.name"
:href="link.href"
class="block px-4 py-2 text-base font-medium hover:text-primary"
>
<router-link :to="link.href" v-slot="{ isExactActive }">
<span
v-if="isExactActive"
class="text-center mt-7 bg-accent transform rounded-full z-40"
style="height: 3px"
/>
<component
:is="link.name"
class="w-6 h-6 text-secondary hover:text-primary"
:class="{ 'text-accent indicator': isExactActive }"
>
{{ t(link.name) }}</component
>
</router-link>
</a>
</div>
</DisclosurePanel>
</Disclosure>
</template>
<script lang="ts">
import { computed, defineComponent, inject } from 'vue'
import { Disclosure, DisclosureButton, DisclosurePanel } from '#headlessui/vue'
import { MenuIcon, XIcon } from '#heroicons/vue/outline'
import Button from '../../../ui/src/components/Button.vue'
import { useI18n } from 'vue-i18n'
import { Language } from '#package/lib/types/Language'
import { useStore } from 'vuex'
export default defineComponent({
name: 'Header',
components: {
Disclosure,
DisclosureButton,
DisclosurePanel,
MenuIcon,
XIcon,
Button
},
setup() {
const { t, locale } = useI18n({ useScope: 'global' })
const store = useStore()
const navigation = [
{ name: 'navbar.home', href: '/', current: true },
{ name: 'navbar.about', href: '/about', current: false },
{ name: 'navbar.FAQ', href: '/FAQ', current: false },
{ name: 'navbar.contact', href: '/contact', current: false }
]
const selected = computed((): Language => store.state.language)
const setLanguage = (lang: Language): void => {
locale.value = lang.toLowerCase()
store.commit('setLanguage', lang)
}
const appDomain = inject('appDomain')
return {
t,
navigation,
setLanguage,
selected,
Language,
appDomain
}
}
})
</script>
<style>
#media (max-width: 910px) {
.buttons-container {
display: none;
}
}
</style>

Keep/push query parameter in from html input - react/next

I have table with inputs filters (2x select input, 1x search form).
I need keep this parameters in URL because if somebody will want refer on my page with specific filter like
www.example.com/?size=xxl&color=red&search=hats
So if will visitor visit the page i would like to automatic set the inputs from this query parameters.
Problem is in my code this not work, if i change select input or put some text in search label, i cant see any URL change. the url is static "www.example.com"
In search label work just if i remove the
event.preventDefault();
But i need this keep, because i dont want refresh page and loose state.
fetch method is GET. I wondering i can use some history.push or something from next router, but i thing its other way?
SearchLabel
import { DocumentSearchIcon } from '#heroicons/react/solid';
import { useState } from 'react';
const SearchLabel = (props) => {
const { setSearch } = props;
const [searchValue, setSearchValue] = useState('');
const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchValue(event.target.value);
};
const onSubmit = (event) => {
event.preventDefault();
setSearch(searchValue);
};
return (
<div>
<form onSubmit={onSubmit} onBlur={onSubmit}>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Dle názvu
</label>
<div className="mt-1 flex rounded-md shadow-sm">
<div className="relative flex items-stretch flex-grow focus-within:z-10">
<input
onChange={(event) => changeHandler(event)}
type="text"
name="download"
id="download"
value={searchValue}
className="focus:ring-blue-500 focus:border-blue-500 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300"
placeholder="Název dokumentu"
/>
</div>
<button
onClick={onSubmit}
type="button"
className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
>
<DocumentSearchIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
<span>Search</span>
</button>
</div>
</form>
</div>
);
};
export default SearchLabel;
Select filter
import { Fragment } from 'react';
import { Listbox, Transition } from '#headlessui/react';
import { CheckIcon, SelectorIcon } from '#heroicons/react/solid';
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ');
}
const ListBox = (props: any) => {
const { filterData, name, filterValue, setFilter } = props;
return (
<Listbox value={filterValue} onChange={setFilter} >
{({ open }) => (
<>
<div className="flex-cols ">
<Listbox.Label className="block text-sm font-medium text-gray-700">
{name}
</Listbox.Label>
<div className="mt-1 relative flex-initial w-64 ">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<span className="block truncate">
{filterValue === '' ? 'All' : filterValue}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{filterData.map((data, index) => (
<Listbox.Option
key={index}
className={({ active }) =>
classNames(
active ? 'text-white bg-blue-600' : 'text-gray-900',
'cursor-default select-none relative py-2 pl-3 pr-9'
)
}
value={data.value}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? 'font-semibold' : 'font-normal',
'block truncate'
)}
>
{data.name}
</span>
{selected ? (
<span
className={classNames(
active ? 'text-white' : 'text-blue-600',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</div>
</>
)}
</Listbox>
);
};
export default ListBox;

How can I store the previous all the values of my state in react js

I have 2 objects size and colors later it will be more. I have a dynamic field based on those attributes. The problem is I can store the first field values but when I add the second dynamic field the previous data is removed. I am trying to store all the previous data values when the state update.
If you wish, you can see my live code: https://codesandbox.io/s/bold-http-0yh6m3?file=/src/App.js
My states and data: addAttributes for showing values and fakeAttributes are the detailed value of addAttributes.
const [attributes, setAttributes] = useState([{ label: '', value: 1 }])
const [newAttributes, setNewAttributes] = useState([{ label: '', value: 1 }])
// Data
const addAttributes = [
{ label: 'colors', value: 1 },
{ label: 'size', value: 2 },
]
// Attributes data
const fakeAttributes = [{
label: 'colors',
object: [
{ label: 'Black', value: 1 },
{ label: 'Green', value: 2 },
]
},
{
label: 'size',
object: [
{ label: 'M', value: 1 },
{ label: 'S', value: 2 },
]
}
]
I am using react-select npm, The below code is adding a dynamic field. setNewAttributes storing the values into the newAttributes state. When I console.log(newAttributes) it returns the value correctly but as soon as I add a new field the previous data removing. I didn't create any function for adding dynamic fields I have tried this way.
{fakeAttributes.map((attr) => {
const item = attributes.filter((list) => {
return list.label === attr.label;
})[0];
if (item) {
return <div key={attr.label} className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> {attr.label} </label>
<Select options={attr.object} onChange={(e: any) => setNewAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" isMulti /></div>
}
})}
I have tried like this way, If I use dependency it calls the value every time but did not work properly:
useEffect(() =>{
setNewAttributes((oldArray):any => [...oldArray, newAttributes]);
}, [newAttributes])
My expected result is similar to this array object.
[
0:{label: 'colors', SelectedValue: {{label: "green"}},
1:{label: 'size', SelectedValue: {{label: "M"}, {label: "S"}}
]
My full code:
import React, { useEffect, useState } from 'react';
import "file-upload-with-preview/dist/file-upload-with-preview.min.css";
import DateTimePicker from 'react-datetime-picker';
import Select from 'react-select';
import './AddProduct.css'
import AddRemoveMultipleInputFields from './AddRemoveMultipleInputFields';
interface IAppProps {
}
const AddProduct: React.FunctionComponent<IAppProps> = (props) => {
const [date, setDate] = useState(new Date())
const [size, setSize] = useState()
const [attributes, setAttributes] = useState([{ label: '', value: 1 }])
const [newAttributes, setNewAttributes] = useState([{ label: '', value: 1 }])
const [selectedImages, setSelectedImages] = useState([]);
// const [arr, setArr] = useState([])
const onSelectFile = (event: any) => {
const selectedFiles = event.target.files;
const selectedFilesArray = Array.from(selectedFiles);
const imagesArray: any = selectedFilesArray.map((file: any) => {
return URL.createObjectURL(file);
});
setSelectedImages((previousImages) => previousImages.concat(imagesArray));
};
// Data need to break and store label info in another variable and add value dynamically
const addAttributes = [
{ label: 'colors', value: 1 },
{ label: 'size', value: 2 },
]
// Attributes data
const fakeAttributes = [{
label: 'colors',
object: [
{ label: 'Black', value: 1 },
{ label: 'Green', value: 2 },
]
},
{
label: 'size',
object: [
{ label: 'M', value: 3 },
{ label: 'S', value: 4 },
]
}
]
useEffect(() =>{
setNewAttributes((oldArray): any => [...oldArray, ...attributes]);
},[])
// const previousValue = () => {
// setNewAttributes((oldArray): any => [...oldArray, ...attributes]);
// }
// console.log(newAttributes);
const Countries = [
{ label: "M", value: 355 },
{ label: "S", value: 54 },
{ label: "XL", value: 43 },
{ label: "XXL", value: 61 },
];
return (
<div className=" ">
<div className="mt-5 md:mt-0 md:col-span-2">
<form action="#" method="POST">
<div className="grid grid-cols-3 gap-4">
<div className="col-span-2">
<div className="shadow sm:rounded-md sm:overflow-hidden">
<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
{/* TITLE */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-3"> Title </label>
<input className="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Title" />
</div>
{/* SHORT DETAILS */}
<div className="flex flex-row gap-6">
<div className="basis-1/2">
<label className="block text-sm font-medium text-gray-700 mb-3"> Brand </label>
<input className="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Brand " required />
</div>
<div className="basis-1/2">
<label className="block text-sm font-medium text-gray-700 mb-3"> Categories </label>
<Select onChange={(e: any) => setSize(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" options={Countries} isMulti />
</div>
</div>
<div className="flex flex-row gap-6">
<div className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> Regular Price </label>
<input className="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Regular Price " required />
</div>
<div className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> Sale Price </label>
<input className="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Sale Price" />
</div>
<div className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> Offer last date and time </label>
<DateTimePicker className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' onChange={setDate} value={date} />
</div>
</div>
<div className='flex flex-row gap-6'>
{fakeAttributes.map((attr) => {
const item = attributes.filter((list) => {
return list.label === attr.label;
})[0];
if (item) {
return <div key={attr.label} className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> {attr.label} </label>
<Select options={attr.object} onChange={(e: any) => setNewAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" isMulti /></div>
}
})}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-3"> Description </label>
<textarea className="shadow form-textarea mt-1 block w-full border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows={5} placeholder="Description"></textarea>
</div>
</div>
</div>
</div>
<div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6">
<section className='image-upload'>
<label className='mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md flex-col items-center '>
<div>
<svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<br />
<div>
<span>+ Add Images up to 10 images</span>
<input
type="file"
name="images"
onChange={onSelectFile}
multiple
accept="image/png , image/jpeg, image/webp"
/>
</div>
</label>
<br />
{selectedImages.length > 0 &&
(selectedImages.length > 10 ? (
<p className="error">
You can't upload more than 10 images! <br />
<span>
please delete <b> {selectedImages.length - 10} </b> of them{" "}
</span>
</p>
) : (
''
))}
<div className="images flex flex-row gap-6">
{selectedImages &&
selectedImages.map((image, index) => {
return (
<div key={image} className="image basis-1/4">
<div className='flex justify-between'>
<button
onClick={() =>
setSelectedImages(selectedImages.filter((e) => e !== image))
}
>
x
</button>
<p>{index + 1}</p>
</div>
<img className='shadow sm:rounded-md' src={image} height="200" alt="upload" />
</div>
);
})}
</div>
</section>
<div className="basis-1/4">
<label className="block text-sm font-medium text-gray-700 mb-3"> Attributes </label>
<Select onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" options={addAttributes} isMulti />
</div>
<div className=" py-3 text-right ">
<button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
</div>
</div>
</div>
</form>
</div>
</div>
)
};
export default AddProduct;

Firebase will create a new user, but won't return the user object?

I'm using Firebase V9 with React. When I fill out the fields below, Firebase will create a new user for me, but it won't return the user object. When I try to console.log(user), nothing appears. Where am I going wrong here?
import { React, useState } from 'react';
import {
createUserWithEmailAndPassword,
onAuthStateChanged,
} from 'firebase/auth';
import { auth } from '../firebase-config';
function Signup() {
const [registerEmail, setRegisterEmail] = useState('');
const [registerPassword, setRegisterPassword] = useState('');
const [user, setUser] = useState({});
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
});
const register = async () => {
try {
const user = await createUserWithEmailAndPassword(
auth,
registerEmail,
registerPassword
);
console.log(user);
} catch (error) {
console.log(error.message);
}
};
return (
<div className="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<a href="/">
<img
className="mx-auto h-12 w-auto"
src="./img/logo-orange.png"
alt="HBD Logo"
/>
</a>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Sign up for your free account
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
Already have an account?{' '}
<a
href="/signin"
className="font-medium text-orange-600 hover:text-orange-500"
>
Sign in.
</a>
</p>
</div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form className="space-y-6">
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email address
</label>
<div className="mt-1">
<input
onChange={(event) => {
setRegisterEmail(event.target.value);
}}
autoComplete="email"
type="email"
required
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm"
/>
</div>
</div>
<div>
<label
htmlFor="password"
className="block text-sm font-medium text-gray-700"
>
Password
</label>
<div className="mt-1 space-y-6">
<input
onChange={(event) => {
setRegisterPassword(event.target.value);
}}
autoComplete="current-password"
type="password"
required
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm"
/>
</div>
</div>
<div>
<button
onClick={register}
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500"
>
Sign up
</button>
</div>
</form>

Why my function in html code is not being called?

I'm working on a Laravel Livewire project which uses TailwindCSS and AlpineJS. But my issue is about my setCountry() function not being called. I can see the parameters are being correctly passed but the function itself is not being called. The toggleCountriesHandler() function is working nicely.
I bet it is something under my nose, but I still can't figure it out, and I'm a begginer in programming.
Here's my code snippet:
toggleCountriesHandler = () => {
let toggleCountries = document.getElementById("countriesOpen");
if (toggleCountries.style.display === "none") {
toggleCountries.style.display = "block";
} else {
toggleCountries.style.display = "none";
}
}
setCountry = (country_id, country_code, country_name) => {
document.getElementById("country-id").value = country_id;
document.getElementById("selected-country").innerHTML = "<img class='w-5 h-5 rounded-full' src='img/flags/16/" + country_code + ".png'>" + "<span class='block ml-3 font-normal truncate'>" + country_name + "</span>";
document.getElementById("countriesOpen").style.display = "none";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel="stylesheet" />
<span class="block text-sm font-medium text-gray-700 transform translate-y-5">{{__("Country")}</span>
<div style="height: 42px;" class="relative flex items-center justify-center w-full pl-3.5 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<button onclick="toggleCountriesHandler()" class="block w-full truncate focus:outline-none">
<label id="selected-country" class="flex flex-row items-center text-gray-500">{{__("Select your country")}}</label>
</button>
<div class="absolute top-0 right-0 w-full mt-12 bg-white rounded-md shadow-lg sm:bg-white">
<input id="country-id" type="hidden" name="country_id">
<ul id="countriesOpen" style="display: none;" class="py-1 overflow-auto text-base rounded-md sm:border max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
#foreach(DB::table('countries')->get() as $country)
<li role="option" class="relative ">
<button onclick="setCountry({{ $country->id }}, '{{ $country->code }}', '{{ $country->name }}')" type="button" class="flex items-center w-full py-2 pl-3 space-x-3 cursor-default select-none text-extrading-text-primary sm:text-gray-900 pr-9 focus:outline-none hover:bg-indigo-600 hover:text-white">
<img class="w-5 h-5 rounded-full" src="{{ asset('img/flags/16/' . $country->code . '.png') }}">
<span class="block font-normal truncate">
{{$country->name}}
</span>
</button>
</li>
#endforeach
</ul>
</div>
</div>
I am posting my comment as an answer to close this question.
const toggletoggleCountriesHandler=()=>{}
const is usually used for the function declarations , since people don't change it.
Still you can use var , let also for declaration

Categories