Help! I need to set a default value for a v-text-field in a custom component, but all my attempts to override the editedItem.color v-model have failed.
I work with Laravel PHP and could really use some assistance from my fellow developers here. I'm new to this job and I really don't want to mess up.
<div v-if="formState === 'create'">
<v-text-field
v-model="editedItem.color"
:default="'#FF0000'"
:value="'#FF0000'"
:disabled="true"
label="Color*"
/>
</div>
When it comes to data, here's what the custom component provides:
data: () => ({
formState: 'create',
loading: false,
items: [],
editedItem: {},
selectedItems: [],
}),
This should be a simple task, setting a default value and sending it to the API. However, the v-model does not accept v-bind:value or v-bind:default.
As I am new to Vue and this is a Vuetify component, I'm struggling to make it work.
In essence, I need either to set the default value for 'create' mode as #FF0000 or manipulate the value from v-color-picker to only use the hex value without returning an array.
The main issue is that the color picker returns an array, but we need a single hex value.
Here is my implementation on the tags/index.vue page using the custom component:
Thanks for any help!
<template>
<work-custom-table
v-model="headers"
:routes="routes"
:title="title"
settings-key="crud.table"
sort-by="name"
allow-merge
>
<template #item.preview="{ item }">
<v-chip :color="item.color">{{ item.name }}</v-chip>
</template>
<template #form="{editedItem, formState}">
<v-row>
<v-col>
<v-text-field
v-model="editedItem.name"
:disabled="formState === 'view'"
:rules="[$rules.required]"
label="Name*"
hint="*Required"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-text-field
v-model="editedItem.description"
:disabled="formState === 'view'"
:rules="[$rules.required]"
label="Description"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<div v-if="formState === 'create'">
<v-text-field
v-model="editedItem.color"
:disabled="true"
label="Color*"
/>
</div>
<div v-else>
<v-color-picker
id="tag-color"
v-model="editedItem.color"
:default="'#FF0000'"
:disabled="formState === 'view'"
class="elevation-0"
label="Color*"
hint="*Required"
mode="hexa"
hide-canvas
/>
</div>
</v-col>
</v-row>
</template>
</work-custom-table>
</template>