VueJ에서 렌더링 목록 항목의 innerText를 가져오는 방법s

VueJ에서 렌더링 목록 항목의 innerText를 가져오는 방법s

나는 그 물건을 사고 싶다.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"
    }
  }
})

사용하셨으니까ref="refWord"와 같은 요소에서v-for,this.$refs.refWord에 의해 렌더링되는 각 DOM 요소를 포함하는 배열입니다.v-for.

각 단어의 색인을 참조한 후 클릭 핸들러에 전달해야 합니다.

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

그럼, 네 안에서cw_valuemethod: 인덱스 값을 사용하여 배열의 올바른 요소에 액세스합니다.

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

여기 작동하는 바이올린이 있습니다.

---

또는 클릭 핸들러에서 클릭된 단어를 인라인으로 설정하는 것이 훨씬 간단합니다.

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

여기도 그걸 위한 바이올린 연주가 있어요.

innerText는 CSS 스타일을 고려하므로 innerText 값을 읽으면 reflow가 트리거되어 최신 계산 스타일을 보장합니다(계산 비용이 많이 들 수 있으므로 가능하면 참조를 피하십시오).여기 그것에 대한 MDN 문서가 있습니다.

현재는 다음과 같습니다.

this.$refs.refWord[index].textContent

언급URL : https://stackoverflow.com/questions/44209728/how-to-get-the-innertext-of-rendered-list-item-in-vuejs