How to override django Select widget with v-select (vuetify)??

Using Django
1

I want to override the Select widget with vuetify v-select. I went through django code base https://github.com/django/django/blob/master/django/forms/widgets.py and tried to override default Select widget but not succeed.

The problem is with django default Select it renders like this

<select>
    <option > data1 </option>
    <option > data2 </option>
    <option > data3 </option>
</select>

but in vuetify the options will be included in items which look something like this

<v-select items=[data1, data1, data3]><v-select>

Are there anyway that I can get the choices from my model and insert it into items?

This is my model and what i have tried (I used UserCreationForm):

# model
class User(AbstractUser):
    gender = models.CharField(max_length=10, choices=(('Male', 'Male'), ('Female', 'Female')))

# form
from . import custom_widget as w

class RegisterForm(UserCreationForm):
    class Meta(UserCreationForm):
        model = User
        fields = [ 'gender']
        widgets = {'gender': w.Select()}

# custom_widget.py
from django.forms.widgets import Input, ChoiceWidget

class Select(ChoiceWidget):
    input_type = 'select'
    template_name = 'custom_widget/select.html'
    option_template_name = 'custom_widget/select_option.html'
     # others are same as django's widget.py

#select.html
# I stuck at this section, don't know what to do to make it work from here
<v-select name="{{ widget.name }}"
{% include "custom_widget/select_option.html" %}
{% include "custom_widget/attrs.html" %} 
>
</v-select>

#select_option.html
<option value="{{ widget.value|stringformat:'s' }}"{% include "custom_widget/attrs.html" %}>{{ widget.label }}</option>
2

First, I would suggest taking some time to really examine the templates to see how they’re put together and how the different files and components relate to each other.

Now, in looking at your specific case, I’m not sure I would build my widgets on the existing select templates. I’d probably create a completely custom template because the pattern needed doesn’t really fit the “select” pattern.