Guide on displaying the value of an element in a Vue modal

Question

Guide on displaying the value of an element in a Vue modal

I am working with a list of items displayed as <li> elements in a loop. When one of these elements is clicked, I would like a modal box to open up displaying specific content related to that particular element.

The following data represents the items in the list:


    {value: 10, name: "foo"},
    {value: 12, name: "bar"},
    {value: 14, name: "foobar"},
    {value: 22, name: "test"},
    {value: 1, name: "testtooo"},
    {value: 8, name: "something"}

Upon clicking an element, I would like to view the corresponding value property inside the modal box.

To see how this functions, I have created a fiddle here: https://jsfiddle.net/hvb9hvog/14/

Inquiry

I have successfully implemented the modal feature, but I am unsure how to display the value property of each individual element within the modal itself. Can anyone provide guidance on achieving this?

javascript vue.js modal-dialog vuejs2

Answer 1

Answer №1

There are various approaches to tackle this issue, but one method is to introduce a new data property named value. When you trigger a @click event on the li element, you obtain its value, assign it to the value property, and then showcase that value in the modal's body ({{this.value}}).

You can define two @click methods, hence include another one to update the recently established data property, designated as value.

Explore this fiddle

Key code adjustments:

Within your li element:

<li v-for="request in filteredRequests">
    <a href="#" @click="showModal = true; setVal(request.value)">{{request.name}}</a>
</li>

In your modal markup:

<modal v-if="showModal" @close="showModal = false">
    <!--
    custom content could be utilized here for overriding
    default content
    -->
    <h3 slot="header">custom header</h3>
    <div slot="body">
        {{this.value}}
    </div>
</modal>

Inside vue data:

data: {
    requests: [
        {value: 10, name: "foo"},
        {value: 12, name: "bar"},
        {value: 14, name: "foobar"},
        {value: 22, name: "test"},
        {value: 1, name: "testtooo"},
        {value: 8, name: "something"}
    ],
    num: 0,
    showModal: false,
    value: 9999999999
},

Within vue methods:

methods: {
    setVal(val) {
        this.value = val;
    }
},

This script demonstrates Vue components along with related HTML and CSS styles.

Answer 2

There are various approaches to tackle this issue, but one method is to introduce a new data property named value. When you trigger a @click event on the li element, you obtain its value, assign it to the value property, and then showcase that value in the modal's body ({{this.value}}).

You can define two @click methods, hence include another one to update the recently established data property, designated as value.

Explore this fiddle

Key code adjustments:

Within your li element:

<li v-for="request in filteredRequests">
    <a href="#" @click="showModal = true; setVal(request.value)">{{request.name}}</a>
</li>

In your modal markup:

<modal v-if="showModal" @close="showModal = false">
    <!--
    custom content could be utilized here for overriding
    default content
    -->
    <h3 slot="header">custom header</h3>
    <div slot="body">
        {{this.value}}
    </div>
</modal>

Inside vue data:

data: {
    requests: [
        {value: 10, name: "foo"},
        {value: 12, name: "bar"},
        {value: 14, name: "foobar"},
        {value: 22, name: "test"},
        {value: 1, name: "testtooo"},
        {value: 8, name: "something"}
    ],
    num: 0,
    showModal: false,
    value: 9999999999
},

Within vue methods:

methods: {
    setVal(val) {
        this.value = val;
    }
},

This script demonstrates Vue components along with related HTML and CSS styles.

Answer 3

Answer №2

Include the "req" property in the data

data() {
  return {
     ...
     req: {},
     ...
  }
}

Add a click event:

<a href="#" @click="showModal = true; req = request">{{request.name}}</a>

Integrate a body slot

 ...
 <h3 slot="header">custom header</h3>
 <div slot="body">
   {{req.value}}
 </div>
 ...

https://jsfiddle.net/w4e6hr86/

Answer 4

Include the "req" property in the data

data() {
  return {
     ...
     req: {},
     ...
  }
}

Add a click event:

<a href="#" @click="showModal = true; req = request">{{request.name}}</a>

Integrate a body slot

 ...
 <h3 slot="header">custom header</h3>
 <div slot="body">
   {{req.value}}
 </div>
 ...

https://jsfiddle.net/w4e6hr86/

Answer 5

Answer №3

Are you unsure if your question pertains to Vue.js or just plain JS? Here are some basic examples that might help. I suggest looking into event delegation and events in vuejs for more information.

Vue Js

<template>
  <div class="content">
    <ul>
      <li v-for="item in items" @click.prevent="showModal(item)">{{ item }}</li>
    </ul>

    <div class="modal" v-show="isModalVisible">
      {{ JSON.stringify(selectedItem) }}
      <a href="#" @click.prevent="selectedItem = null">close modal</a>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'something',
    data () {
      return {
        selectedItem: item,
        items: [{
          id: 1,
          name: 'something'
        }, {
          id: 2,
          name: 'something #2'
        }]
      }
    },
    computed: {
      isModalVisible () {
        return this.selectedItem !== null
      }
    }
    methods: {
      showModal (item) {
        this.selectedItem = item
      }
    }
  }
</script>

Plain javascript

const toggleModal = content => {
  const $body = document.querySelector('body')
  const $modal = $body.querySelector('.modal')
  $modal && $modal.remove()
  $body.insertAdjacentHTML('beforeend',`<div class="modal">${content}</div>`)
}

document.querySelector('ul').addEventListener('click', e => {
  if (! e.target.matches('li')) {
    return
  }

  toggleModal(e.target.innerText)
});

Explore Event delegation.
Learn about insertAdjacentHtml.
Read up on Vuejs Event handling

Answer 6

Are you unsure if your question pertains to Vue.js or just plain JS? Here are some basic examples that might help. I suggest looking into event delegation and events in vuejs for more information.

Vue Js

<template>
  <div class="content">
    <ul>
      <li v-for="item in items" @click.prevent="showModal(item)">{{ item }}</li>
    </ul>

    <div class="modal" v-show="isModalVisible">
      {{ JSON.stringify(selectedItem) }}
      <a href="#" @click.prevent="selectedItem = null">close modal</a>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'something',
    data () {
      return {
        selectedItem: item,
        items: [{
          id: 1,
          name: 'something'
        }, {
          id: 2,
          name: 'something #2'
        }]
      }
    },
    computed: {
      isModalVisible () {
        return this.selectedItem !== null
      }
    }
    methods: {
      showModal (item) {
        this.selectedItem = item
      }
    }
  }
</script>

Plain javascript

const toggleModal = content => {
  const $body = document.querySelector('body')
  const $modal = $body.querySelector('.modal')
  $modal && $modal.remove()
  $body.insertAdjacentHTML('beforeend',`<div class="modal">${content}</div>`)
}

document.querySelector('ul').addEventListener('click', e => {
  if (! e.target.matches('li')) {
    return
  }

  toggleModal(e.target.innerText)
});

Explore Event delegation.
Learn about insertAdjacentHtml.
Read up on Vuejs Event handling

Guide on displaying the value of an element in a Vue modal

Answer №1

Answer №2

Answer №3

Similar questions

Tips for sending a unique button ID to a jQuery click function

Tracking the progress of reading position using Jquery within an article

Issues with setSelectionRange functionality in JavaScript unit tests leading to unexpected behavior

Passing an event from onSubmit in React without using lambdas

Viewing the JSON Data

Broadening the capabilities of jQuery through a versatile function

What is the best way to eliminate an object from an array of objects depending on a certain condition?

Struggling with populating a dropdown in MVC with JSON data fetched from an API using jQuery/JavaScript

Are the root options for Vue Resource being neglected?

Common mistakes encountered when utilizing webpack for react development

Next.js experiences slowdown when initializing props on the server side

Looking for matching index in rotated array

Customizing the renderInput of the Material UI DatePicker

Analyzing npm directive

The React JSX error message "Maximum update depth exceeded" occurs when there

Instructions for integrating content into Vuetify's v-navigation-drawer

What could be causing the directives module to not get properly incorporated into the Angular app module?

Troubleshooting a problem with arrays in Vue.js and axios

Successive vows

Is there a universal method to transform the four array values into an array of objects using JavaScript?