从单击的子元素到父元素的嵌套v-for访问

Question

如何从子元素@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)
}

Answer 1

您可以将事件处理程序更改为openModal（不带括号和参数）。然后定义您的方法以接收如下事件：

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

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

您可以使用元素属性来获取子项目。

您还可以考虑仅通过一个ID。

Answer 2

在这里，将动态值传递给click事件，并将其捕获到“方法”对象中。

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>

希望这会有所帮助。

Answer 3

只需在Melas' solution上进行扩展并提供一些演示。功劳归于Melas。

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>