Javascript 如何使用vue在div内获取img和p标签？

我想在单击

元素时获得

的图像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;
        }
    }
});

img class=“img fluid”src=“图像/模型细节小.png”alt=”“/>
海拔{{elevationA}}-{{elevationASqt}}平方英尺

var vm=新的Vue({
el:“#应用程序”，
方法：{
showImage:功能（事件）{
元素=event.currentTarget；
控制台日志（元素）；
//href=element.getAttribute（'src'）；
//this.imgSrc=href；
}
}
});

您应该为隐藏元素添加额外的包装，以切换可见性

newvue({
el:“应用程序”，
数据：（）=>({
imageVisible:错误，
imgSrc:“”，
文本：“”
}),
方法：{
setData（）{
this.imageVisible=true
this.imgSrc=https://picsum.photos/200/300'
this.text='Lorem ipsum dolor'
}
}
})

。图像保持器{
宽度：200px；
最小高度：300px；
背景：#ccc；
}

{{text}}

考虑到您是通过

事件获得
div
元素。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;
        }
    }
});

---

img标记有就可以做到这一点：

可以做到这一点，而且不会在DOM树中注入额外的节点。