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

What are some ways to create a flashing effect for text in HTML and JavaScript?

Vuetify: Dynamic v-select options based on user selection

Trouble arises when attempting to incorporate the Restangular dependency with Angular using browserify

Modifying an object's attribute in React.js by toggling a checkbox

Building a custom error page with Laravel 10, Inertia JS, and Vue.js featuring resource routing

How can I efficiently fetch data from Firebase, manipulate it through computations, and present it using React Hooks?

Acquiring images from an external source and storing them in either the $lib directory or the static folder during the

Why is the 'a' element not clickable after the AJAX complete function has executed in JavaScript?

Updating a particular element within nested arrays: best practices

The main.js file will be served by nodeJS using express

Is AngularJS not able to effectively manage the button type "reset"?

The inability to read property 0 of undefined persists despite implementing conditional rendering

Expand Elements to occupy entire width

Show or hide the legend on a highchart dynamically

Is it possible to dynamically call a component in Vue.js using a variable name

Transferring information from child to parent class in TypeScript

Exploring the world of JSON files using JavaScript

Utilizing ng-repeat in a tabset to create an interactive and customizable tab interface

Ajax transmitting data with concealed characters

What are the steps to collapse React state in a comments section?