如何使用事件 @select 从 Vue.js 的段落中选择一些文本？

我正在使用 Vue.jsNuxt在 SSR 中，我希望当我突出显示某些文本时获取该文本并对其执行操作。

我找到了一种方法，可以用一些文本来做到这一点<input>但我希望在这里能够从段落中而不是从输入中@select一些文本。

这是我使用的方法<input>:

<template>
  <div>
    <input @select="testFunction2()" value="TEXTE TO SELECT">
  </div>
</template> 

mounted() {
  window.addEventListener('select',this.testFunction2,innerHTML)  
},
methods:{
  testFunction2(event) {
    console.log(event.target.value.substring(event.target.selectionStart, event.target.selectionEnd));
  },

我尝试用“innerHTML”替换“侦听器”代码中的“值”，但它似乎不起作用，

谢谢你！

编辑 ： 我使用了特里提出的方法，它在段落中效果很好。 但是，当我想突出显示从 Vue 组件上的 v 循环中的数据库返回的对象上的某些文本时，我收到此错误：“未捕获的类型错误：无法在“节点”上执行“包含”：参数 1 不是”类型为“节点”。 在 HTMLDocument 中。

这是我在 vue 组件上返回的对象，该对象实际上是一个 html 文本，我使用 v-html 将其转换为纯文本：

<li   v-for=" itemJournal in journalContent"> 
 <b-row>
<b-col col lg="10" id="myNoteList" class="htmlNonUser grey-text text- 
darken-2 myNoteList" style=""><p v-html="itemJournal.content" 
ref="target"> </p> 
</b-col>
</b-row>


  mounted:function(){
     document.addEventListener('mouseup', event => {
    if (event.target === this.$refs.target || 
  event.target.contains(this.$refs.target))
    this.testFunction1();
  });
  },

  testFunction1(event){

console.log(window.getSelection().toString());
 },

The select事件仅受类似输入的元素支持。如果您想在常规元素中获取选定的文本，只需收听mouseup事件。 mouseup 事件应该调用一个您只需调用的函数window.getSelection().toString()检索选定的文本。

在下面的例子中，我们绑定mouseup听者document，并在事件处理程序中执行额外的过滤，以便只有感兴趣的元素（在本例中，this.$refs.target) 将触发获取选择的回调：

new Vue({
  el: '#app',
  mounted() {
    document.addEventListener('mouseup', event => {
      if (event.target === this.$refs.target || event.target.contains(this.$refs.target))
        this.testFunction();
    });
  },
  methods: {
    testFunction() {
      console.log(window.getSelection().toString());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @select="testFunction" value="Text to select" />
  <p ref="target">Lorem ipsum dolor sit amet</p>
</div>

Update：根据您的回答，您要么想要更新event.target进行比较（例如，如果您不希望触发任何选择testFunction()），或者离开if条件完全退出：

document.addEventListener('mouseup', event => {
    this.testFunction1();
});