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.

---

Altern atively、それだけでクリックハンドラ内にインラインでクリックしたワードを設定することがはるかに簡単になります：あなたは天才だ

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

Here's a working fiddle for that too.