How to add a fixed text on a dropdown, tailwind

Best Answer

Level 73

And if you remove this line

<option v-for="(symptom, id) in options" :key="id" :value="id">{{ symptom }}</option>

Do you then see the text?

I believe the reason is because on the default option which you've put selected to you don't have a value, and then there is a default value in your form.symptoms_1 property which does not match a no value option, will show as an empty dropdown.

So you make sure that you have value="" on your first option or -1 as a value, and then initialize the form.symptoms_1 to be either empty string or -1 whichever you chose.

Level 1

@Nakov I set the value on the first option feature, but I didn't understand what to do with form.symptoms_1

Nakov

Level 73

@TikTina in your data() how do you initialize the form object? Set the default to the symptoms_1 to match the value="" you set for the default option.

let form = {
	symptoms_1: "",
};

Do you initialize it at all or?

Level 1

@Nakov

data(){
            return{
                form:{
                    mrid:this.medicalRecordId,
                    symptoms:'',
                    when_problem_started:'',
                    pain_area:'',
                    symptoms_1:[],
                    symptoms_2:[],
                    symptoms_3:[],
                }

Nakov

Level 73

@TikTina why do you use an array [] when there is only one selected? change the [] to the value you'll use in the default option.

1 like

Level 1

@Nakov That's it, thank you!

mihcael

Level 1

change the text-grey to text-dark or something and check it.

Tray2

Level 73

Is it something like this you are looking for?

<option value="" disabled selected>Select your symptom</option>

Level 1

None of this work for me : /

Level 102

@TikTina can you recreate the problem here and share a link? https://play.tailwindcss.com/

Level 1

@Sinnbeck I can't because, as @nakov said, I can see the text if I remove <option v-for="(symptom, id) in options" :key="id" :value="id">{{ symptom }}</option> since this part is connected to the database. So If I copy-paste the code from the view it would have the text"Choose your symptom", because the data from the database are not listed. Only If I now write every part here including the database.

Level 102

@TikTina you just check it in the rendered html and copy it from there

F12 -> Elements

Level 1

@Sinnbeck I don't understand?

Level 102

@TikTina step by step

open page in Chrome
F12
Elements
find and click container of the selects in the html source
copy
open tailwind play page
paste
share the example here

Level 1

@Sinnbeck Ok, thank you for explaining, but I think you didn't understand me. Here is the link: https://play.tailwindcss.com/uttIl0ogEp

Because this way, the problem is solved. And in my browser, it isn't.