如何獲取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

既然你已經使用ref="refWord"在相同的元素爲v-for，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.

---

Altern atively，它就會簡單得多，只是設置點擊的話內嵌單擊處理程序：

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

Here's a working fiddle for that too.