Vue select not work with me
i have problem when use vue select in nuxt js 3 that i do all step to
https://vue3-select-component.vercel.app/getting-started.html
but stil didn't work
this my page
<div>
{{ tags }}
<label for="tags" class="inline-block mb-1 font-medium">Tags</label>
<VueSelect
v-model="form.tags"
:options="tags"
label="title"
class="bg-gray-200 border-2 border-gray-200 rounded-lg w-full h-10 px-4 "
/>
<div>
<input
type="tags"
name="tags"
id="tags"
class="bg-gray-200 border-2 border-gray-200 rounded-lg w-full h-10 px-4 "
v-model="form.tags">
</div>
</div>
<div>
{{ tags }}
<label for="tags" class="inline-block mb-1 font-medium">Tags</label>
<VueSelect
v-model="form.tags"
:options="tags"
label="title"
class="bg-gray-200 border-2 border-gray-200 rounded-lg w-full h-10 px-4 "
/>
<div>
<input
type="tags"
name="tags"
id="tags"
class="bg-gray-200 border-2 border-gray-200 rounded-lg w-full h-10 px-4 "
v-model="form.tags">
</div>
</div>
Getting Started | Vue 3 Select Component
A performant & accessible Select component for Vue 3. Best in class Selecting solution for Vue 3.
4 Replies
any one can help me ??
😟
Create a minimal reproduction. Issue's with a repro will get more traction.
https://nuxt.new
oii, alguém pode me dá um HELP com vue.js?
the sothing error now
when try submit this error appear
this my scritp
<script setup lang="ts">
import { ref, reactive } from 'vue';
import Multiselect from 'vue-multiselect';
import CREATE_JOB_WITH_USER from '@/graphql/CreateJobWithUser.gql';
import ALL_TAGS from '@/graphql/AllTags.gql';
definePageMeta({
middleware:['sanctum:guest']
})
const { login } = useSanctumAuth();
// Form Data
const form = reactive({
job_title: '',
job_location: '',
job_link: '',
tags: [],
company_name: '',
company_logo: '',
highlighted: false,
pinned: false,
user_name: '',
user_email: '',
user_password: '',
});
// Handle Form Errors
const errors = ref({});
// Fetch Tags
const { result: tagData, error: tagError } = useQuery(ALL_TAGS);
const tags = tagData.value?.tags || [];
// Apollo Client
const { mutate: createJobWithUser } = useApollo();
const submit = async () => {
// Clear previous errors
errors.value = {};
try {
// Run GraphQL mutation
await createJobWithUser({
mutation: CREATE_JOB_WITH_USER,
variables: form
});
// Perform login
await login({
data: {
email: form.user_email,
password: form.user_password,
},
});
// Navigate to home page
navigateTo('/');
} catch (error) {
// Handle errors
console.error('Error during submit:', error);
errors.value.submit = error.message;
}
};
</script>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import Multiselect from 'vue-multiselect';
import CREATE_JOB_WITH_USER from '@/graphql/CreateJobWithUser.gql';
import ALL_TAGS from '@/graphql/AllTags.gql';
definePageMeta({
middleware:['sanctum:guest']
})
const { login } = useSanctumAuth();
// Form Data
const form = reactive({
job_title: '',
job_location: '',
job_link: '',
tags: [],
company_name: '',
company_logo: '',
highlighted: false,
pinned: false,
user_name: '',
user_email: '',
user_password: '',
});
// Handle Form Errors
const errors = ref({});
// Fetch Tags
const { result: tagData, error: tagError } = useQuery(ALL_TAGS);
const tags = tagData.value?.tags || [];
// Apollo Client
const { mutate: createJobWithUser } = useApollo();
const submit = async () => {
// Clear previous errors
errors.value = {};
try {
// Run GraphQL mutation
await createJobWithUser({
mutation: CREATE_JOB_WITH_USER,
variables: form
});
// Perform login
await login({
data: {
email: form.user_email,
password: form.user_password,
},
});
// Navigate to home page
navigateTo('/');
} catch (error) {
// Handle errors
console.error('Error during submit:', error);
errors.value.submit = error.message;
}
};
</script>
