We Keep Coding

Vue 3 Breadcrumb did not work with <Script setup>

I need your help for my Breadcrumb component.
It did work last time but after I add the Pinia it did not work anymore.
I don't know if this is related to Pinia or not.
This is the screenshot of the project
my_vue_project_screenshot
If you additional detail more than below, please let me know
Thank you all in advance
Also, I'm not sure my Vue project structure is correct or not.
Main layout
|
|- BreadCrumb
|- RouterView
I put BreadCrumb component inside every View pages. Like this (for example)
<script setup>
import breadcrumb from '../../components/breadcrumb.vue';
const pages=[{ name: 'ช่าง', href: '/staff', current: true }]
const technicians = [
{ id: 0, name: 'Mr A', score: 25, role: 'กลึง' },
{ id: 1, name: 'Mr B', score: 35, role: 'เจาะ' },
]
</script>
<template>
<breadcrumb :pages="pages"/>
<div class="space-y-6 pt-8 sm:space-y-5 sm:pt-10">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-xl font-semibold text-gray-900">รายชื่อช่าง</h1>
<p class="mt-2 text-sm text-gray-700">Admin</p>
</div>
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<router-link to="/staff/add">
<button type="button" class="inline-flex items-center justify-center rounded-md border border-transparent
bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">เพิ่มช่าง</button>
</router-link>
</div>
</div>
<div class="mt-8 flex flex-col">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">ชื่อ</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">แผนก</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">คะแนน</th>
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="technician in technicians" :key="technician.id">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">{{ technician.name }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.role }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ technician.score }}</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<router-link :to="{ name: 'editstaff', params: { id: technician.id }}"
class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ technician.name }}</span>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
This is my BreadCrumb.vue
<script setup>
import { ChevronRightIcon, HomeIcon } from '#heroicons/vue/20/solid'
</script>
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="/" class="text-gray-400 hover:text-gray-500">
<HomeIcon class="h-5 w-5 flex-shrink-0" aria-hidden="true" />
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li v-for="page in pages" :key="page.name">
<div class="flex items-center">
<ChevronRightIcon class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<a :href="page.href" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
:aria-current="page.current ? 'page' : undefined">{{ page.name }}</a>
</div>
</li>
</ol>
</nav>
</template>
Lastly, this is my main Layout (Not sure if this is related too or not
<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '#headlessui/vue'
import {
HomeIcon,
Bars3Icon,
FolderIcon,
UsersIcon,
XMarkIcon
} from '#heroicons/vue/24/outline'
const authenticated = false;
const navigation = [
{ name: 'home', to: '/', icon: HomeIcon },
{ name: 'enj', to: '/staff', icon: UsersIcon },
{ name: 'proj', to: '/project', icon: FolderIcon },
{ name: 'selectproj', to: '/selectproject', icon: FolderIcon },
{ name: 'validateproj', to: '/validateproject', icon: FolderIcon },
]
const sidebarOpen = ref(false)
</script>
<template>
<div>
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog as="div" class="relative z-40 md:hidden" #close="sidebarOpen = false">
<TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
</TransitionChild>
<div class="fixed inset-0 z-40 flex">
<TransitionChild as="template" enter="transition ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full">
<DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
<TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100" leave-to="opacity-0">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" #click="sidebarOpen = false">
<span class="sr-only">Close sidebar</span>
<XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</TransitionChild>
<div class="h-0 flex-1 overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 space-y-1 px-2">
<router-link v-for="item in navigation" :key="item.name" :to="item.to" class="['text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
<component :is="item.icon" :class="[isActive ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-4 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</router-link>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<a href="#" class="group block flex-shrink-0">
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<p class="text-base font-medium text-white">Tom Cook</p>
<p class="text-sm font-medium text-gray-400 group-hover:text-gray-300">View profile</p>
</div>
</div>
</a>
</div>
</DialogPanel>
</TransitionChild>
<div class="w-14 flex-shrink-0">
<!-- Force sidebar to shrink to fit close icon -->
</div>
</div>
</Dialog>
</TransitionRoot>
<!-- Static sidebar for desktop -->
<div class="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex min-h-0 flex-1 flex-col bg-gray-800">
<div class="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
<div class="flex flex-shrink-0 items-center px-4">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
</div>
<nav class="mt-5 flex-1 space-y-1 px-2">
<RouterLink v-for="item in navigation" :key="item.name" :to="item.to" :class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-sm font-medium rounded-md']">
<component :is="item.icon" :class="[item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300', 'mr-3 flex-shrink-0 h-6 w-6']" aria-hidden="true" />
{{ item.name }}
</RouterLink>
</nav>
</div>
<div class="flex flex-shrink-0 bg-gray-700 p-4">
<div class="group block w-full flex-shrink-0">
<div v-if="authenticated" class="flex items-center">
<div class="ml-3">
<p class="text-base font-medium text-white pl-2">:Username</p>
<RouterLink to="/">
<p class="text-xs font-medium text-gray-300 group-hover:text-gray-200">Logout</p>
</RouterLink>
</div>
</div>
<div v-else class="flex items-center">
<div class="ml-3">
<RouterLink to="/signin">
<p class="text-base font-medium text-gray-300 group-hover:text-gray-200">เข้าสู่ระบบ</p>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-1 flex-col md:pl-64">
<div class="sticky top-0 z-10 bg-gray-100 pl-1 pt-1 sm:pl-3 sm:pt-3 md:hidden">
<button type="button" class="-ml-0.5 -mt-0.5 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" #click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<main class="flex-1">
<div class="py-6">
<div class="mx-auto max-w-7xl px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<slot>
<RouterView/>
</slot>
<!-- /End replace -->
</div>
</div>
</main>
</div>
</div>
</template>

How to make a styled circle component using tailwindcss?

I am working on image upload component in my react app and I design the image uploader component.
Here is the code and the result respectively.
<div className="px-8 py-6 mt-2 text-left bg-white shadow-lg">
<form action="">
<div class="flex items-center justify-center bg-grey-lighter">
<label class=" flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</div>
</form>
</div>
But I want change it exactly as the following component.

Make sure you have the same width and height for the element you want circular, in combination with rounded-full.
I adapted your example and used h-40 and w-40 to control height and width. With rounded-full, the result is a circular component.
<div class="flex items-center justify-center">
<form action="">
<label class="text-blue border-blue hover:bg-blue flex h-40 w-40 cursor-pointer flex-col items-center justify-center rounded-full border bg-white uppercase tracking-wide shadow-lg hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</form>
</div>

Is this you want ??
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10 w-72 border-4 border-gray-200 rounded-full">
<div class="bg-gray-300 p-20 w-52 rounded-full text-center">
Upload <br/>Photo
</div>
</div>

Vue why click event not working in v-if or v-show

i am trying to fire click event from div but if v-if false on component rendering click event not working
here my code:
export default {
name: "ProSelect",
data() { return {
isActive: false,
}},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
}
}
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
if i change isActive variable to true on rendering click is working
i found the answer but i wonder why this is not working.If i use #mousedown.prevent instead of #click its working

I am not sure if I get it correctly but as per the code you posted. Your parent div will be removed from the DOM as v-if is false. You can assign isActive as true while mounting.
Working Demo :
new Vue({
el: '#app',
data() {
return {
isActive: false,
}
},
methods: {
select(event) {
console.log('ID :' + event.currentTarget.id);
}
},
mounted() {
this.isActive = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>

this is whole template code
<template>
<div>
<div class="flex flex-col items-center">
<div class="w-full flex flex-col items-center">
<div class="w-full">
<div class="flex flex-col items-center relative">
<div class="w-full">
<div class="flex">
<div class="flex flex-auto flex-wrap"></div>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:rounded-none focus:rounded-t-lg focus:border-b-0 focus:bg-white focus:border-indigo-500 border-transparent focus:border-transparent focus:ring-0"
type="text"
v-model="selected"
:name="name"
#focusin="isActive = !isActive"
#focusout="isActive = !isActive"
placeholder="Search by position">
</div>
</div>
<div
v-if="isActive"
class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto">
<div class="flex flex-col w-full">
<div
id="foo"
#click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon
</div>
</div>
</div>
</div>
<div
id="foo2"
v-on:click="select($event)"
class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100 hover:bg-gray-100 hover:border-indigo-500">
<div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
<div class="w-full items-center flex">
<div class="mx-2 -mt-1">
Jack jhon 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

I cannot identify the reason for this message in Alpine JS

I get this error and have no idea how to fix:
alpine.js:115 Alpine Error: "ReferenceError: Invalid left-hand side in assignment"
Expression: "getTasks() = rightSideOfExpression($event, getTasks())"
Element: <input class=​"shadow appearance-none border rounded w-1/​3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:​outline-none focus:​shadow-outline" id=​"valorvenda" type=​"text" placeholder=​"Valor" autofocus x-ref=​"valorvenda" #keydown.enter=​"addTask($refs.valorvenda.id)​">​
u # alpine.js:115
(anonymous) # alpine.js:132
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus="" x-ref="valorvenda" #keydown.enter="addTask($refs.valorvenda.id)">
VM5454749:3 Uncaught (in promise) ReferenceError: Invalid left-hand side in assignment
at eval (eval at d.el (alpine.js:174), <anonymous>:3:21)
at d.el (alpine.js:174)
at d (alpine.js:131)
at alpine.js:151
at be.evaluateCommandExpression (alpine.js:1760)
at z (alpine.js:933)
at HTMLDivElement.l (alpine.js:909)
and a have no idea what i do! Can you help me, please?

You probably meant to compare instead of assign. Change = to ==:
getTasks() == rightSideOfExpression($event, getTasks())

I spend my weekend searching for the problem.
I believe the cause is because I'm using the x-model attribute like this:
<div x-data="tasks()" x-init="getTasks()" x-model="getTasks()">
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-green-800 bg-green-100">
Definir estratégia de COMPRA:
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorcompra" type="text" placeholder="Valor" autofocus x-ref="valorcompra" #keydown.enter="addTask($refs.valorcompra.id)">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="percentualcompra" type="text" placeholder="Percentual">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadecompra" type="text" placeholder="Quantidade">
</div>
<template x-for="(t, taskIndex) in tasks.filter(t => t.coin === window.moeda && t.boardName === 'compra')" :key="taskIndex">
<div :id="t.uuid">
<div class="bg-white rounded-lg shadow mb-3 p-2 text-sm">
<div x-text="t.name" class="text-gray-800"></div>
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
<div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
<div class="items-start text-right text-red-800" #click="removeTask(t.uuid)"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
</div>
</div>
</div>
</template>
</div>
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-red-800 bg-red-100">
Definir estratégia de VENDA:
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus x-ref="valorvenda" #keydown.enter="addTask($refs.valorvenda.id)">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="percentualvenda" type="text" placeholder="Percentual">
<input class="shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadevenda" type="text" placeholder="Quantidade">
</div>
<template x-for="(t, taskIndex) in tasks.filter(t => t.coin === window.moeda && t.boardName === 'venda')" :key="taskIndex">
<div :id="t.uuid">
<div class="bg-white rounded-lg shadow mb-3 p-2 text-sm">
<div x-text="t.name" class="text-gray-800"></div>
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
<div x-text="formatDateDisplay(t.date)" class="text-gray-500 text-xs"></div>
<div class="items-start text-right text-red-800" #click="removeTask(t.uuid)"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
assigning a JS function here is the cause of the error. What I need is a way to update the x-data every time the getTasks() fucntion is run and I don't know how to do it.

What is the problem for using fullPage.js moveTo?

I want to make a button to move a specific page...like if I click the #move_to_slide2, then the page moves to slide2, but the moveTo function doesn't work.
There is only one section and 4 slides.
How can I make the move to button?
<div class="section" anchor="s0">
<div class="slide" data-anchor="slide1">
<div class="container w-1/3 mx-auto">
<div class="my-40">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="text-xl font-bold text-center text-unifolio-blue">Getting Started</div>
<div class="flex w-full mt-5 items-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 rounded-full bg-unifolio-blue cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide2">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<p id="move_to_slide3">
<p class="w-full h-6 rounded-full bg-gray-400 cursor-pointer"></p>
</p>
<div class="h-px w-full bg-gray-400"></div>
<div class="flex w-full mb-5 items-center text-center justify-center">
<p id="move_to_slide1">
<p class="w-full h-6 text-xs text-unifolio-blue cursor-pointer">아이디 및 비밀번호 설정</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide2">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">개인정보 입력</p>
</p>
<div class="h-px w-full bg-white"></div>
<p id="move_to_slide3">
<p class="w-full h-6 text-xs text-gray-400 cursor-pointer">핸드폰 인증</p>
</p>
<div class="h-px w-full bg-white"></div>
this is my script.
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
$('#move_to_slide1').click(function(){
fullpage_api.moveTo(1,slide1);
});
$('#move_to_slide2').click(function(){
fullpage_api.moveTo(1,slide2);
});
$('#move_to_slide3').click(function(){
fullpage_api.moveTo(1,slide3);
});
$('#move_to_slide4').click(function(){
fullpage_api.moveTo(1,slide4);
});
});
</script>

You are not passing the correct parameters to moveTo.*
2nd param should be the slide anchor string or the slide index.
For example:
fullpage_api.moveTo(1, 1); // using slide index
fullpage_api.moveTo(1, 'slide1'); // using slide anchor