Issue with the select tag not responding to @change event in Vue3 composition API

I attempted using @change and watch with no success. How can I detect when the select value is changed?

This is the code snippet I am working with:

 <select v-model="selected" @change="changeLang()" >
    <option v-for="item in langList" :key="item.text" :value="item.lang">
      {{ item.text }}
    </option>
 </select>

function changeLang()
{
   console.log("Called>>>>");
}

watch(() => selected, (first, second) => {
      console.log(
        "Watch props.selected function called with args:",
        first,
        second
      );
});

Answer №1

Check out the code snippet below:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const selected = ref(null)
    const langList = ref([{text:'en', lang: 'english'}, {text:'de', lang: 'deutsch'}, {text:'it', lang:'italian'}])
    
    const changeLang = () => {
      console.log("Function called:", selected.value);
    }

    return {
      selected, langList, changeLang
    }
  }
})
app.mount('#demo')
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6117140421524f534f5358">[email protected]</a>/dist/vue.global.prod.js"></script>
<div id="demo">
  <select v-model="selected" @change="changeLang()" >
    <option v-for="item in langList" :key="item.text" :value="item.lang">
      {{ item.text }}
    </option>
 </select>
</div>

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

Conceal Profile Field When User Metadata is Empty - WordPress

Hey everyone, hope you're all having a great evening! I'm looking to hide a profile field when the user meta is empty. For instance, in the image provided, I want to conceal the billing_ateco row because the billing_ateco field is blank. https ...

Implementing validation in ASP.Net along with JavaScript for both the update and cancel buttons

My main objective is to show a message during the server roundtrip of an ASP.Net WebForm. Within my WebForm, there are two buttons: an update button and a cancel button. The message should always appear if either the update button or the cancel button is c ...

Creating a custom icon and static placeholder in a bootstrap dropdown list

I am just starting out in the world of web development and I have been experimenting with creating a dropdown list that includes a static, slightly faded placeholder, along with a custom icon. My goal is to have the selected item's text displayed on t ...

There seems to be a caching issue in ReactJS and Spring Data Rest that could be causing problems with

Encountering an unusual caching problem here. Just recently wiped out my database. While adding new users to the system, an old user mysteriously reappeared. This user has not been recreated and is not in the current database whatsoever. I'm at a lo ...

Error arises when trying to use jspdf.addHTML

When attempting to use jsPDF in Angular 2, I encountered an issue while running the following code on a button click event: generatePDF(){ const options = {'pagesplit': true} this.pdf.addHTML(this.id.nativeElement, 10, 10, options, funct ...

Add data to a JSON structure

I'm attempting to populate the screenshot object with all PNG files in the following code: common.getFilesInFolder(reportDir, '.png', function(err, PNGs) { if(!err && PNGs.length > 0){ for(var i=0; i< PNGs.le ...

What steps are necessary to integrate expo-auth-session with Firebase?

I am working on implementing a feature in my code that will allow users to login and authenticate using their Google credentials. Once they successfully log in, I want them to be added to my authentication database in Firebase. My attempt to achieve this ...

Tips for automatically redirecting a webpage to another webpage upon submission of form elements:

I'm currently working on a website where I want to integrate radio buttons as part of a form. Below is the code snippet I've been using... <form action="glitter.php" method="post"> <input type="radio" name="font" value="fonts/darkcrysta ...

What is the best way to target and select all spans within a specific div using JavaScript?

I'm struggling with selecting all spans in the card using code that currently only selects the first span when I use getElementsByTagName. Can anyone offer assistance as I have multiple cards containing spans? TypeError: Failed to execute 'inse ...

In order to trigger the mousedown event in Three.js, I have found that I need to click and gently move my cursor

There seems to be an issue with the code below, as the "intersects" variable does not populate with items in the onDocumentMouseDown event handler when I simply click an object. It only detects the object clicked when I click and slightly drag the mouse be ...

Unable to execute jQuery animations on mobile devices when calling the function

I am experiencing an issue with a table that has a clickable option. Upon clicking this option, certain functions are supposed to run and alter the display of the page. The button code looks like this: <table id="topBar"> ... <td id="menuHead ...

Vue.js: Utilizing anonymous functions within props object

Looking to enhance the select2 example to make it more practical, I have added multiselect functionality and am now exploring custom select2 configuration options. Check out my progress on jsFiddle Encountering an issue where function properties of props ...

Max value determined by a variable within a for loop

UPDATE: Revised code provided. In my Node.js JavaScript project, I am creating a script to iterate through a dataset obtained by web scraping. The main goal of this algorithm is: 1) Examine the player table for the presence of the player's name in a ...

How to create a responsive image that appears over a button when hovering in Bootstrap?

My goal is to display an image over a button when hovering. I've tried adding the .img-responsive class in Bootstrap while including the image in the HTML, but it's not working as expected with my current method of loading images. The buttons the ...

Tips for adding titles to elements in an array?

Is there a way to cycle through all "select" elements and assign them titles in the correct order from firstDay to thirdDay? Currently, only the last one (thirdDay) is displaying on all elements. Any assistance would be greatly appreciated! var firstDay ...

The integration between React.js, Node.js, and Express.js is facing issues with the socket.io functionality

I am currently working on integrating socket.io with React.js, running the socket.io on a backend server using Express.js. One issue I am facing is that when an order is placed on the homepage, it should be displayed in real-time on the Orders page in Rea ...

Experiencing an excessive amount of re-renders

Encountering the error of too many re-renders Attempted to utilize useEffect to render only when weather changes function DashboardHeaderContent({ looks, weather }) { const [seasonRange, setSeasonRange] = React.useState(); function renderLook(look) ...

extract objects from an array of objects based on a specified array

Within my JSON array, I have data structured like this: const data = [ { "uniqueId": 1233, "serviceTags": [ { "Id": 11602, "tagId": "FRRRR", "missingRequired&quo ...

Exploring Three.js raycasting in a non-full screen scenario

I've encountered some challenges with raycasting in three.js recently. The div element I'm using is not fullscreen, which I believe is causing issues with the raycast positioning that I'm struggling to resolve. let mouseVector = new THR ...

Is there a way to ensure that my function does not return undefined and instead returns a specific value?

Currently, I am facing a roadblock while attempting to conquer the Rock-Paper-Scissors challenge proposed by The Odin Project. Some confusion arises as my function playRound seems to be returning undefined when executed. Any insights or assistance in res ...