The Vue JS Option element requires the "selected" attribute to be utilized as a property instead

I'm attempting to automatically have an option selected if the "selected" property is present on the option object.

Here is my code snippet:

<template>
    <select v-model="model" :placeholder="placeholder">
        <option v-for="option in options" :value="option.value" :selected="option.selected">{{option.label}}</option>
    </select>
</template>

<script>
export default {
    props: {
        model: {
            default: null
        },
        placeholder: {
            default: null
        },
        options: {
            default: null
        }
    }
};
</script>

The selected attribute appears to be set correctly, as I can see it in the element explorer. However, it seems that this method doesn't fully work since the "selected" property of the option remains false when checked in the element. How can I properly set the selected property of the option element?

Answer №1

To properly connect the initial selected value with the v-model's value, follow these steps:

new Vue({
    el: '#app',
    data: {
        options: [
        {
            value: 'apple',
                label: 'apple label',
            },
        {
            value: 'banana',
                label: 'banana label',
            },
        {
            value: 'orange',
                label: 'orange label',
            },        
        ],
        selected: 'banana',
    }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">

    <select v-model="selected">
        <option v-for="option in options" :value="option.value">{{option.label}}</option>
    </select>

</div>

Answer №2

After some investigation, it became clear that the source of the "data" property for my component was external. I had to track down its origin in order to troubleshoot effectively.

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

Incorporate a distinct identifier for every menu item within the Material UI TablePagination

Can a unique identifier be assigned to each menu item generated using the <TablePagination> component? I would like to add a specific ID (e.g., id="menu_item_0", id="menu_item_1" & id="menu_item_2") to the menu item ...

How can I organize the selected options from a select2 form element using a basic sorting method?

I am utilizing select2 by ivaynberg and encountering an issue with the data arrangement upon submission. Is there a method to have the results in the form submit data reflect the order in which they were selected in the select2 element, without relying on ...

Utilizing Promises in the apply function

I am currently working on a project in Node.js that utilizes bluebird for promise handling, as well as ES6 native promises. In both projects, I have a chain where I make a database query structured like this: some_function(/*...*/) .then(function () ...

What is the reason why the beforeDestroy method is not invoked during a refresh, but the created method is triggered

I'm attempting to trigger a page refresh in vue.js. When doing so, I notice that the created hook is being called. Why isn't the destroyed hook triggered instead? If the created hook is being called, it suggests that the component should have be ...

Issue with Sliding Transition in React Material UI Drawer Component

I developed a custom drawer component for my React application const CustomSidebar = () => { return ( <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} > <Box> <Navigator / ...

Is there a way to automatically change the full screen background on refresh?

Is there a way to have the background image of this website change to different pictures every time the page is refreshed? I'm curious about how this can be achieved. I noticed that Offliberty is able to do this. I tried looking at the source code b ...

Switch between using the useState hook by toggling it with the MUI Switch

Looking to implement a custom Dark Mode feature for a specific element on my create-react-app website using MUI. I have successfully implemented the Switch to change the state on toggle, but I am having trouble figuring out how to toggle it back and fort ...

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...

Tips for extracting variables from a get OData call function

Is there a better approach to retrieving variables from a GET OData call? I'm struggling with extracting the 'id' variable from the call within my method. I've tried using callbacks, but have not been successful. Do you have any suggest ...

Nuxtjs app experiences compatibility issues with Bootstrap templates

Greetings to all who come across this issue. I am currently working on a project using Nuxt.js with the Bootstrap template. The header and footer are displaying correctly, but the problem lies in the design of the body not showing up. https://i.stack.imgu ...

Adjust dimensions of images in Bee3D carousel

I recently utilized the Bee3d library available on the following Github link: https://github.com/lukeed/bee3d While I found everything to be truly impressive, I am curious if there is a way to adjust the image size. Whenever I attempt to change the image ...

Using a function parameter to restore the values of an array

Looking to clear an array using a function parameter. Below is my implementation: <script> fruitArray = ["apple", "banana", "orange", "pineapple"] function clearFruitArray(myArr){ myArr = []; ...

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: However, when I create the map with D3/topoJSON, it shows up small and inverted. Even after exploring various solutions (like Center a map in d3 given a ...

Response coming from an ajax call in the form of a JSON

With the JSON string provided below: {cols:[{"id":"t","label":"Title","type":"string"},{"id":"l","label":"Avg ","type":"string"},{"id":"lb","label":"High","type":"string"},{"id":"lo","label":"Low","type":"string"}],rows:[{"c":[{"v":"Change navigation"},{"v ...

The AngularJS error message reads, "The function is not defined as a

Currently, I am working on enhancing my AngularJS application, where I have multiple widgets on a page displaying system status information. My goal is to allow users to hide the heading of a specific widget. There is a 'Settings' button on the ...

What is the process for crafting a Vuejs controlled input form?

Although I am familiar with creating controlled components in React using state, I am new to the Vue framework and would like to understand how to adapt my code from React to be compatible with Vue. My goal is to store the values of input fields in a data ...

Sending data from JavaScript to PHP using the POST method

I recently learned that using ajax for data passing doesn't require a form or hidden value. I'm hoping to find an example to better understand how it works. index.js: function collectData(r) { // identifies the row index var i = r.pare ...

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

Vue.js fails to update view after file status changes

I am currently working with Vue.js and have the following code snippet: <div class="file has-name is-fullwidth is-light"> <label class="file-label"> <input class="file-input" ...

I've been attempting to develop a React application, but I consistently encounter the following error: "npm ERR! cb() function was never invoked!"

Here is the issue at hand: HP@DESKTOP-1HP83V8 MINGW64 ~/Desktop/Web-Development (master) $ npx create-react-app my-app A new React app is being created in C:\Users\HP\Desktop\Web-Development\my-app. Packages are being installed. ...