Vue: the placeholder option in the select input is no longer visible once v-model is added

<select
         class="cursoruser-pointer p-2 w-full rounded-full ">
    <option class="rounded-full "
            disabled selected value="">Language to learn</option>
    <option class="rounded-full">German</option>
    <option>Spanish</option>
    <option>English</option>
</select>

Shows

https://i.sstatic.net/adZ9m.png

However when 

v-model = "selectedLanguage"
is added:

<select v-model = "selectedLanguage"
         class="cursoruser-pointer p-2 w-full rounded-full ">
    <option class="rounded-full "
            disabled selected value="">Language to learn</option>
    <option class="rounded-full">German</option>
    <option>Spanish</option>
    <option>English</option>
</select>

The placeholder disappears:

https://i.sstatic.net/djQfx.png

<script>
    ...

    export default {
        ...
        data: () => ({
                selectedLanguage: 'Language to Learn',
        }),
...

What can be done to resolve this?

htmlcssvue.jsdrop-down-menu

Answer №1

Make sure that your initial value for selectedLanguage is an empty string, as you have set the option "Language to learn" to have a value of an empty string (value=""). Additionally, you can remove the selected attribute since you are already using v-model.

Check out the demo: https://codesandbox.io/s/still-dawn-nu4m8?file=/src/App.vue

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click ...

htmlcss

The display of treepanel response text on an extjs grid within a layout-browser is achieved through the use of the

I am attempting to showcase an ExtJS grid and tree within a layout-browser. The tree's response data is displayed in the ExtJS grid, which then dynamically refreshes. My goal is that when I click on a tree leaf, the data from that leaf should be displ ...

phphtmlmysqlajaxextjs4

New HTML output is displaying strangely when using jQuery AJAX

My jQuery AJAX function retrieves new HTML content from a PHP script. The PHP script is functioning correctly and sending back the accurate HTML to jQuery. However, when I utilize the html() function, the displayed HTML is incorrect. To verify the returned ...

jqueryhtmlajax

What is the best way to utilize eslint in Vue components?

I'm facing an issue with my .vue file that defines a component. Other .vue files are unable to see it properly due to linter errors. I keep getting ES Lint errors like: Cannot find module '../components/LinkButton'. I have tried several st ...

javascriptvue.jsvuejs2eslint

Learn how to use Angular for submitting a form with AJAX interactions

Hello, I am a beginner with Angular and I have been trying to submit a form and check in my MySQL database if the user is present. All of my code works because when I directly input the JSON into my PHP/CodeIgniter code, I get the employee that I'm lo ...

phphtmlangularjscodeigniter

Steps to deactivate the select element in backbone.js

Can someone help me with disabling the select option in my MVC template code using backbone.js? I tried using readonly="readonly" and disable="disable", but it sends null as value and doesn't update my address. <div class="login-register" data-val ...

javascriptjqueryhtmlbackbone.js

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

How can you determine if the top of the window is the same as the top of any section while scrolling

I'm looking to dynamically add a class name "active" to sections on my webpage as I scroll down the page. I want to achieve this by checking if the window's top position is equal to any section's top position. Each section has a unique data- ...

jqueryhtmlcss

Issue with Opening OpenLayers Map after Using the Onclick Function in JQuery

I am facing an issue with my OpenLayers map on my JQM website. It seems to be failing to load properly, and I suspect that the problem lies with the onclick() method. I have explored using the .click() method on the JQuery site as an alternative, but I am ...

phpjqueryhtmljquery-mobileopenlayers

What is the best way to navigate through images only when hovering?

I have a website that showcases a collection of images in a creative mosaic layout. Upon page load, I assign an array of image links to each image div using data attributes. This means that every image in the mosaic has an associated array of image links. ...

javascriptjqueryhtmlimageimage-gallery

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

javascriptjqueryhtmlcss

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Greetings, fellow readers! After a period of silent observation, I am finally making my presence known. My wife and I are in the process of creating her freelance services website. However, we have encountered a troublesome issue that has left me quite pe ...

cssbootstrap-4squarespace

Combining Array Elements to Create a Unified Object with Vue

Is there a way to transform an array into a list of objects? Transform [ { "currenttime":43481.46983805556, "moped":"30 minutes", "car":"1 hour" } ] to { "currenttime":43481.46983805556, "moped":"30 minutes", ...

javascriptarraysjsonvue.jsvuejs2

Locate the chosen radio button within a group of <label> tags using the selenium webdriver

How can I iterate through all the label items within a div? There are multiple label tags with radio buttons inside. I'm using Selenium WebDriver and need to identify the selected radio button. Here are the two things I need to accomplish: Determine ...

javahtmlseleniumselenium-webdriverwebdriver

Removing HTML elements from jQuery load() response

This is a follow-up to tackling the issue addressed in this specific inquiry. In my web development project, I'm utilizing jQuery's load() function to extract a headline enclosed within a div tag from one webpage and inserting it into another pa ...

phpjqueryhtml

Unable to scroll the HTML page to view the complete content

View the CSS images (2 total) and the HTML image below: CSS top CSS bottom HTML ...

htmlcss

Generating a fictional list of items in a sequential order

I am managing a website that focuses on displaying the line of succession to the British crown. The main content of the site is structured as an ordered list using the <ol> tag. However, there is a unique challenge. Individuals occasionally drop out ...

htmlcss

Extract words with specified tags from HTML using Python and return them as a list

Is there a simple way to parse HTML, extract the text, and generate a list of tags associated with each word or snippet of text? For instance, in the given HTML code: <em>Blah blah blah</em> blah again <i>and then again</i> The de ...

pythonhtml

Navigating Joomla with a Menu specifically designed for articles within a specific category

After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...

phpcssjoomlajoomla3.0joomla-extensions

Retrieve the current timestamp within the asynchronous fetch method of NuxtJS

I encountered an issue while using NuxtJS version 2.12.2. I attempted to access $moment inside async fetch, but received the error message app.$moment is not a function. Here is the code snippet in question: pages/_key.vue <template> <div>& ...

vue.jsnuxt.js