title: How to get the innerText of rendered list item in VueJS
body: <p>I want to get the <code>innerText</code> of an item in a rendered list, but accessing it using <code>this.$refs</code> doesn't seem to work. I've also tried to use <code>v-modal</code> and that doesn't seem to work either.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div id="simple" v-cloak&gt;
    &lt;h1&gt;Clicked word value!&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li v-for="word in wordsList" @click="cw_value" ref="refWord"&gt;
        {{ word }}
      &lt;/li&gt;
      &lt;h4&gt; {{ clickedWord }} &lt;/h4&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>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"
      }
    }
  })
  </code></pre>