javascript - change - Как показать значение элементов в модуле vue?



vue router title meta (2)

Добавить свойство «req» к данным

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

установить событие click:

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

добавить слот для тела

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

https://jsfiddle.net/w4e6hr86/

У меня есть несколько элементов, которые отображаются как элементы <li> в цикле. Для каждого элемента я хочу, чтобы поведение было таким, что при щелчке элемента открывается модальный прямоугольник. Внутри модального окна я хочу, чтобы содержимое было специфичным для элемента, который был нажат.

Ниже приведены все элементы:

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

Когда я нажимаю на элемент, я хочу увидеть свойство value для него внутри модального окна.

Я создал скрипку для этого: https://jsfiddle.net/hvb9hvog/14/

Вопрос

Тем не менее, я получил модальную работу, как я могу показать свойство каждого элемента в модальном?


Answer #1

Я не уверен, что вы спрашиваете об этом, используя Vue.js или просто JS. Итак, вот мои ответы (основные примеры). Я рекомендую вам прочитать информацию о делегировании событий + события на vuejs.

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>

Обычный 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)
});
  1. О делегировании событий .
  2. О insertAdjacentHtml .
  3. О Vuejs Обработка событий




vuejs2