Unable to initiate any actions with vue-select

Currently, I'm utilizing vue-select to input or select from a dropdown. Upon selecting an option, my goal is to retrieve the value that has been selected.

Sample Code

<vueSelect 
       :clearable="false"
       v-on:change="itemCodeChange($event)"
       :options="itemCode">
</vueSelect>

Script

    import vueSelect from 'vue-select'
    import 'vue-select/dist/vue-select.css';
    components :{
        vueSelect,

    },
  data () {
     return {
        itemCode:[],
     }      
  },
   methods:{
  itemCodeChange (a)
      {
          alert(a)
      }

Despite making changes, nothing seems to be happening.

Answer №1

Ensure you are using the input event instead of the change event: check out the code snippet below for a working example

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [
      'foo',
      'bar',
      'baz'
    ]
  },
  methods: {
    changed(v) { console.log(v); }
  }
})
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:600';
@import 'https://unpkg.com/vue-select/dist/vue-select.css';

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}
<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options" @input="changed"></v-select>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>

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

Broaden the natural interface for the element

I'm looking to create a uniquely customized button in React using TypeScript. Essentially, I want to build upon the existing properties of the <button> tag. Below is a simplified version of what I have so far: export default class Button extend ...

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

I've always wondered why setting a certain object's key as its own value in a loop results in undefined. Take this code block, for example: var text = 'this is my example text', obj = {}, words = text.split(' '); for (i = ...

Tips for resolving the issue of noscript not functioning correctly on a Vue App when JavaScript is disabled

I'm currently in the process of setting up a new Vue.JS application through the Vue UI interface. However, when I attempt to launch the application by using the command vue serve src/App.vue, I notice that only the default Home | About is displayed on ...

Updating object properties in Vue 3 Composition API's reactive array: A step-by-step guide

Currently, I am developing a project with Vue.js 3 using the Composition API. In this project, I have a reactive array that contains objects created with ref(). My goal is to update specific properties within these objects and re-render the component whene ...

Updating form values when a radio button is changed using asynchronous JavaScript and XML (AJ

Here is the form I have created: <form method="post" action="options.php" id="pay_what_you_want_form"> <input type="radio" name="payment_period" value="monthly" id="monthly" checked><label for="monthly" class="payment_period_label"> ...

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

I developed an inventory calculator in JavaScript that provides item count based on weight. The calculator has 4 inputs, and now I'm looking to replicate the same functionality using Angular. Is there a method in Angular similar to .querySelectorAll() ...

What could be causing the error when attempting to send an HttpResponse from a Django View function?

Trying to utilize Ajax, I'm attempting to call a Django View function from JavaScript code. The View function is expected to return an HttpResponse, which should then be printed out on the console. However, upon inspection of the console, it simply s ...

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

Locate items visible to the user on the display

I need to find a way to access the products that are currently visible when a user scrolls through my product list. Each product in the list has the class name product. <div class="product"> <span>price:2</span> </div> ...

When using React Leaflet, the initial object is found to be undefined in a useState scenario while trying to draw

Attempting to iterate through an object that has been obtained from a CSV file containing Locations and corresponding Lat/Lng pairs. However, the initial loop iteration results in all values of the object being undefined. The code snippet I am using is: i ...

How to properly pass data between parent and child components in VueJS without using provide/inject

I've been experimenting with using provide and inject to pass data from parent to child elements, but I'm running into an issue where the data isn't available in the child element. It's strange because when I add the same data directly ...

Failing to draw an image on a blank canvas

I'm having trouble with my canvas. I want to clear it and then redraw it 30 pixels to the left on the x axis. However, when I try running the code, the canvas clears but the new image is not drawn. If I remove the "clearRect" function, the images are ...

Guide to effortlessly loading files with designated decorators in a node.js application

Within the realm of Project A, I have constructed a decorator and am seeking a method to automatically load all these decorators upon initializing the application in Project B, which is the project utilizing Project A. Is there a way to accomplish this tas ...

A guide on effectively utilizing the Map datatype in JavaScript

Recently, I've started delving into the world of es6 Map due to its unique features, but I have some reservations regarding pure operations. For example, when removing properties from objects, I usually use the following function: function cloneOmit ...

Issues arise when trying to use Prettier and ESlint in conjunction with one another

It appears that prettier is not formatting the code as desired. Here is my current ESLint configuration: "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ &q ...

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

Acquire data from an HTML Element

I was provided with the following div that was already created for me: <div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1 ...

What is the best npm package for implementing Fluent UI in Vue.js - @fluentui/web-components or @microsoft/fast-components?

From what I gather, the @fluentui/web-components library has a dependency on @microsoft/fast-components: The web components in the @fluentui/web-components library are created using Microsoft's FAST web component and design system foundation. They u ...

Issue with React Routes only occurring in the production website

I'm encountering an issue on my personal website that only occurs in production, but not in my local environment. Here's the situation: I have set up the routes as follows const Routes = () => ( <Router> <Route exact path=&quo ...

Exploring and extracting values from nested arrays of objects in JavaScript and React

Hey there, I am having trouble getting the data from the backend server to display on a chart library. Can you please take a look at my code and help me out? const data = [ { id: "americano", data: [{x: "10",y: 10,}, {x: &quo ...