Вложенный v-для доступа от выбранного дочернего элемента к родительскому элементу - PullRequest
Новая
       10

Вложенный v-для доступа от выбранного дочернего элемента к родительскому элементу

0 голосов
/ 07 января 2019

Как получить доступ к родительскому элементу, выбранному щелчком, из метода дочернего элемента @click?

Например: 

<div v-for="(item, ,index) in bubles">
  {{item.name}}
  <div v-for="subItem in item.bubles">
    <a @click="openModal(subItem)">{{subItem.name}}</a>
  </div>
</div>

здесь, в методе openModal() Я хочу получить родительский элемент subItem, поэтому щелкнул элемент в родительском v-for: 

openModal(subItem) {
  console.log(subItem)
}

Ответы [ 3 ]

0 голосов
/ 07 января 2019

Вот оно, Передайте динамическое значение событию щелчка и захватите его в объекте 'методов'. 

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
	methods: {
  	openModal: function(message) {
     console.log(message);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul id="example-1">
  <li v-for="item in items">
    <a @click='openModal(item.message)'>{{item.message}}</a>
  </li>
</ul>

Надеюсь, это поможет.

0 голосов
/ 07 января 2019

Просто чтобы расширить решение Меласа и предоставить некоторую демонстрацию. Кредит идет на Мелас . 

new Vue({
  el: '#app',

  data() {
    return {
      bubles: [{
          name: 'item 1',
          bubles: [
            { name: 'item 1.1' }
          ]
        },
        {
          name: 'item 2',
          bubles: [
            { name: 'sub-item 2.1' },
            { name: 'sub-item 2.2' },
            { name: 'sub-item 2.3' }
          ]
        },
        {
          name: 'item 3',
          bubles: [
            { name: 'sub-item 3.1' },
            { name: 'sub-item 3.2' }
          ]
        }
      ]
    }
  },

  methods: {
    openModal(evt) {
      if (evt.target) {
        // Not recommended, but you get the idea
        let parent = evt.target.parentElement.parentElement;

        // If you don't need to support IE, use this instead
        // parent = evt.target.closest('.parent-buble');

        parent.classList.add('highlight');

        // For demo purposes only
        setTimeout(() => {
          parent.classList.remove('highlight');
        }, 1000);

        console.log(parent);
      }
    }
  }
})
div.buble {
  cursor: pointer;
}

div.buble.highlight {
  color: crimson;
  font-weight: bold;
}

.child-buble {
  margin-left: 15px;
  color: #000;
  font-weight: normal;
}

.child-buble:active {
  color: crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(item, index) in bubles" :key="item.name" class="buble parent-buble">
    {{item.name}}

    <div v-for="subItem in item.bubles" :key="subItem.name" class="buble child-buble">
      <a @click="openModal($event)">{{subItem.name}}</a>
    </div>
  </div>
</div>
0 голосов
/ 07 января 2019

Вы можете изменить свой обработчик событий на openModal (без скобок и параметров). Затем определите свой метод для получения события следующим образом: 

<a @click="openModal">{{subItem.name}}</a>

openModal(event) {
 // use event.target to get the element and then you can *walk* the dom
}

Вы можете использовать атрибуты элемента, чтобы получить свой подпункт.

Вы также можете рассмотреть возможность передачи идентификатора.

...