javascript - 如何在 VueJS 中获取渲染列表项的 innerText

Question

我想获取呈现列表中某个项目的 innerText，但使用 this.$refs 访问它似乎不起作用。我也尝试过使用 v-modal，但似乎也不起作用。

这是我的代码:

<div id="simple" v-cloak>
  <h1>Clicked word value!</h1>
  <ul>
    <li v-for="word in wordsList" @click="cw_value" ref="refWord">
      {{ word }}
    </li>
    <h4> {{ clickedWord }} </h4>
  </ul>
</div>

var app = new Vue({
  el: '#simple',
  data: {
    clickedWord: '',
    wordsList: ['word 1', 'word 2', 'word 3']
  },
  methods: {
    cw_value: function() {
      this.clickedWord = this.$refs.refWord.innerText
      // "I don't know how to get inner text from a clicked value"
    }
  }
})

Answer 1

由于您在与 v-for 相同的元素上使用了 ref="refWord"，this.$refs.refWord是一个数组，包含由 v-for 呈现的每个 DOM 元素。

您应该引用每个单词的索引，然后将其传递给点击处理程序:

<li v-for="word, index in wordsList" @click="cw_value(index)" ref="refWord">

然后，在您的 cw_value 方法中，使用索引值访问数组中的正确元素:

cw_value: function(index) {
  this.clickedWord = this.$refs.refWord[index].innerText;
}

Here's a working fiddle.

---

或者，在点击处理程序中直接设置被点击的单词会简单得多:

<li v-for="word in wordsList" @click="clickedWord = word">

Here's a working fiddle for that too.