I have a simple form in my Vue 3 app as below, <form @submit.prevent="createProject"> <div class="my-3"> <label for="name" class="form-label">Project Name</label> <input type="text" class="form-control" id="name" placeholder="Enter project name" v-model="projectName" pattern="[A-Za-z0-9s-_]+" required /> </div> <div class="text-end mt-4"> <button class="btn btn-dark" type="submit">Save</button> </div>…
Javascript and Vue beginner here. Trying out examples to learn the basic concepts. <template> /*<p v-bind:class="['bold', 'italic', isValid ? 'valid' : 'invalid']">*/ <p v-bind:class="classArray"> Hello, {{name[0]}} {{name[1]}} </p> </template> <script> export default { data() { return { isValid: true, name:…
I have this example table taken from https://element-plus.org/en-US/component/table.html#table-with-status I would like to give some color for some rows. Here is a minimal working example: <script setup lang="ts"> type TableRec = { code: string from_title: string | null to_title: string |…
I want to build project with Vue3 CDN (because project environment cannot run npm) so I try to create component with html+CDN. But when I try to create recursive component, It just render top-level element. Is there any solution to…
enter image description here I want to use the package in Vue JS - DatePicker from Primevue The documentation says that you need to install the package using the command - npm install [email protected]. And half on it is work.…
This should be a dead-easy question, and maybe isn't specifically vue/vuetify but I'm ramping up and this would help my understanding. New to vue/vuetify, starting a brand-new front end. I'm using v-app-bar Here's my app.vue: <template> <v-app> <v-app-bar :elevation="2"> <!--…
Please see this minimum example, if I use useState , normally, I can write something like this: <script setup> const num = useState('num', () => 1); </script> <template> <div> {{ num }} </div> <div> {{ typeof num }} </div> <div>…
I was wondering how can I convert this little snippet from typescript into JS. <script setup lang="ts"> import { type Content } from '@prismicio/client'; defineProps( getSliceComponentProps<Content.HeroSlice>([ "slice", ]), ); </script>
I'm new to Vue.js and can't seem to get how an event is passed from a component outside of the router-view to App.vue. I'm currently using the below code in the App.vue <template> <div> <NavBar :userId="userId" :loggedIn="isLoggedIn" /> <router-view :userId="userId"…
I created following data table: <script setup lang="ts"> const headers: any = [ { title: 'Title', key: 'title', cellProps: { class: ['my-bold-class'] } } ... ] const items = [...] </script> <template> <v-data-table :headers :items ></v-data-table> </template> Now I want…