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.

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

Cannot adjust expiration date of express-session in browser

The JQuery function fails to execute following a successful Ajax request

How to hide the header on a specific page using Angular

Scroll upwards within a nested div

Exploring the retrieval of stored information from $localStorage within an AngularJS framework

Ways to retrieve object in Javascript

Ways to extract values from a javascript hash map by exclusively incorporating an array

Issue with accessing form in Angular 6 Reactive forms for custom validator functionality

Error occurs in console when using .getJSON with undefined JSON, but does not happen when using embedded data

Modifying the content in one form field based on the information entered in another input field

"Having trouble implementing sorting functionality on a click event in a React application with Material-UI table

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

What can I do to comprehend and diagnose the error that is appearing in my reactjs code?

Employing require.js, one can integrate a distinctive form of non-concatenated dat.gui source. This allows for the seamless

Receiving the latest global variable in JavaScript using jQuery

Experiencing a 404 ERROR while attempting to submit an API POST request for a Hubspot form within a Next.js application

Can you explain how to create a function in Angular that accepts a number as an argument and then returns the square of that number?

Embed a script into an iframe from a separate domain

A different approach for dynamically displaying React components sourced from an API

Transitioning from AngularJS to Angular 2: Exploring Alternatives to $rootScope.$on