Accessing the selected list item from an unordered list in Vue.js

Question

Accessing the selected list item from an unordered list in Vue.js

How can I capture the selected item from a dropdown-style list and perform operations based on that selection?

In my list, each item is associated with a key for unique identification, except for 'Create New Filter'.

I am seeking guidance on how to determine if 'Create new filter' is clicked or if another item in the list is selected.

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

Here is the code snippet:

 <ul>
     <li v-on:click="create">Create New</li>
     <li v-for="item in list" :key="item.id" v-on:click="Change(item.id,item.text)">{{ item.text }}</li>
</ul>

javascript vue.js vuejs2

Answer 1

Answer №1

From my perspective, I believe that the current approach may not be ideal. It's worth considering why the dropdown is being constructed using <ul> and <li> instead of utilizing the select element, which is specifically designed for form elements and offers a more efficient way to obtain the selected option value through the use of the v-model directive.

Nevertheless, I have followed your requirements and have devised a solution.

var app = new Vue({
  el: '.dropdown',
  data: {
    list: [{
      id: 1,
      text: 'First Filter'
    }, {
      id: 2,
      text: 'First Filter 2021'
    }, {
      id: 3,
      text: 'Full Filter'
    }],
    selectedListItem: null
  },
  methods: {
    create() {
      console.log('New filter Create Called');
    },
    getSelected (item) {
      this.selectedListItem = item;
    },
    save() {
      if (this.selectedListItem) {
        console.log(this.selectedListItem);
      } else {
        console.log('No list option selected');
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <input type="text" placeholder="Select Filter" class="dropdown-toggle" data-toggle="dropdown"/>
  <ul class="dropdown-menu">
    <li v-on:click="create">Create New</li>
    <li v-for="item in list" :key="item.id" v-on:click="getSelected(item)">{{ item.text }}</li>
  </ul>
  <button @click="save">SAVE</button>
</div>

Answer 2

From my perspective, I believe that the current approach may not be ideal. It's worth considering why the dropdown is being constructed using <ul> and <li> instead of utilizing the select element, which is specifically designed for form elements and offers a more efficient way to obtain the selected option value through the use of the v-model directive.

Nevertheless, I have followed your requirements and have devised a solution.

var app = new Vue({
  el: '.dropdown',
  data: {
    list: [{
      id: 1,
      text: 'First Filter'
    }, {
      id: 2,
      text: 'First Filter 2021'
    }, {
      id: 3,
      text: 'Full Filter'
    }],
    selectedListItem: null
  },
  methods: {
    create() {
      console.log('New filter Create Called');
    },
    getSelected (item) {
      this.selectedListItem = item;
    },
    save() {
      if (this.selectedListItem) {
        console.log(this.selectedListItem);
      } else {
        console.log('No list option selected');
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <input type="text" placeholder="Select Filter" class="dropdown-toggle" data-toggle="dropdown"/>
  <ul class="dropdown-menu">
    <li v-on:click="create">Create New</li>
    <li v-for="item in list" :key="item.id" v-on:click="getSelected(item)">{{ item.text }}</li>
  </ul>
  <button @click="save">SAVE</button>
</div>

Accessing the selected list item from an unordered list in Vue.js

Answer №1

Similar questions

Set my click event handler back to its default setting

Utilize Haxe Macros to swap out the term "function" with "async function."

Developing Angular 2 custom async validators for use in reactive forms

Create a circle-shaped floor in THREE.JS that mimics the appearance of a shadow

Getting a JSON response from a JSP page through an AJAX request

What is the proper way to reference the array you require within a function?

Utilize Android accelerometer data to bring objects to life with animation

The jQuery focusout event is triggered on a form element, even if a child element is clicked within the form

Choose an item from a list that does not have a particular class

Splitting the package.json file to separate the front-end and back-end components while utilizing shared

Arrange the child elements of a div to be displayed on top of one another in an HTML document

Creating reactive Arrays in VueJSIn this guide, we will discuss methods

Connect ng-models with checkboxes in input field

What is the best way to specify a type for an object without altering its underlying implicit type?

Res.redirect is failing to redirect and displaying error message 'Connection Unavailable'

Storing data values from a specific object key into an array in Vue: Step-by-step guide

MongoDB failing to enforce unique constraints on partial indexes

The submit button in Angularjs does not respond to the Enter key press

How can I efficiently add multiple items to an array and store them in async storage using React Native?

The process of generating a querystring from a form using jQuery is not functioning as expected