请问vue中有无办法获取div中的span的文字?

是这样的,比如有这样的东西:

    <span>苹果</span> 

    <span>香蕉</span> 
    <span>西瓜</span> 

    <span>菠萝</span> 

在某种情形下(比如div的区域很大,span很小),我希望在点集div的时候,就能获取内部的两个span的文字。

也试过在event里翻找,却找不到与span相关的信息;

也试过给所有span加上ref,但是却只能使用this.$refs来获取所有的span(全部的4个而不是点集div中的两个),会不会是用法不对;

百度了好久也找不到好的方法,故只好发问题求助。

感觉vue这么高端应该有解决方式。

还望大佬们不吝赐教,哪怕给个关键词让我自己搜索也是好的!谢谢!

1 Like

把span里面的文字作为属性定义在data中,根据你点击的div去获取对用的文字就好了

啊……我醒悟了……既然是用vue了……就应该彻底舍弃DOM的思想……
不过有的时候真想用这样的方法……所以还是原生或者JQuery……
反正能解决问题就好……

这要看你的span和苹果是怎么弄出来的了。
如果是可以完全控制的话,可以给span加事件 @click
但是你这么问了,估计是不能控制这些span。
那么就有点麻烦了。
如果你们可以接受jQuery的话,可以用jQuery的方法给span加事件。
另外,有没有试过给 div 加ref?

最后可以试试vue 的 自定义指令,自定义指令 | Vue3中文文档 - vuejs
因为这个可以传递el过来。

最最后,你们的数据哪里来的?如果绑定之前可以修改的话,可以用replace 把 ‘’ 替换为 ‘’,然后再绑定。

总之,你们的苹果是怎么弄上去的?

<div class="handleBtn" @click="toCreateFence">
          <img :src="fence" alt />
          <span>创建分册</span>
        </div>

toCreateFence(e) {

      console.log(e.target.childNodes);

      e.target.childNodes.forEach(item => {

        if (item.nodeName == "SPAN") {

          console.log(item.innerText)

        }

      })
}

这不就是父级代理么,点击事件,查target的子节点;
给span绑dataset数据