javascript - 如何使用 vue 在 div 中获取 img 和 p 标签？

Question

我想获取<p>单击<div>元素时的图像 src 和文本。

<div class="image-holder" @click="showImage($event)" >
  img class="img-fluid"  src="images/models-detail-small.png" alt="" />
  <p>elevation {{elevationA}}- {{elevationASqt}} sq. ft</p>
</div>


var vm = new Vue({
    el: '#app',
    methods: {
        showImage: function (event) {
            element = event.currentTarget;
            console.log(element);

            // href = element.getAttribute('src');
            // this.imgSrc=href;
        }
    }
});

标签： javascriptvue.js

Answer 1

考虑到您正在获取div元素，event.CurrentTarget您可以尝试以下方法。

var vm = new Vue({
    el: '#app',
    methods: {
        showImage: function (event) {
            element = event.currentTarget;
            console.log(element);
            var img = element.getElementsByTagName('img');
            this.imgSrc = img.length > 0 ? img[0].src : null;
            var pTag = element.getElementsByTagName('p');
            this.text = pTag.length > 0 ? pTag[0].textContent : null;
        }
    }
});