Vue에서 특정 키워드를 가진 모든 $ref를 선택하려면 어떻게 해야 합니까?

Vue에서 특정 키워드를 가진 모든 $ref를 선택하려면 어떻게 해야 합니까?

    <div class="row">
      <div class="col" ref="tenure-1">
      </div>
      <div class="col" ref="tenure-2">
      </div>
      <div class="col" ref="tenure-3">
      </div>
    </div>

모두 tenure라는 키워드를 가진 ref를 선택하고 싶습니다.제발 이것 좀 도와주세요.

ref는 오브젝트입니다.이 오브젝트에서는, 「syslog-1」, 「syslog-2」, 및 「syslog-3」가 키입니다.그냥 반복하면 돼요.Object.entries(this.$refs)그런 이름의 열쇠가 있는지 확인해 보세요.

let keys = []
for (let [key, value] of Object.entries(this.$refs)) {
  if (/^tenure/.test(key)) {
      keys.push({ key: value })
  }
}

$ref 객체의 키를 필터링하여 실제 참조에 매핑할 수 있습니다..includes필터에 넣을 수 있지만 원하는 대로 변경할 수 있습니다(regex 등).

Vue.component('rack', {
  props: ['ball'],
  template: '<div>{{ball}}</div>'
})

new Vue({
  el: "#app",
  mounted() {
    var filteredRefs = Object.keys(this.$refs).filter((ref) => {
      if(ref.includes('tenure')){
      return true
      }
      return false
    }).map((val) => { return this.$refs[val]})
    console.log(filteredRefs)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="row">
    <div class="col" ref="tenure-1">
    </div>
    <div class="col" ref="tenure-2">
    </div>
    <div class="col" ref="tenure-3">
    </div>
    <div class="col" ref="not">
    </div>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/58956603/how-to-select-all-refs-which-having-particular-keyword-in-vue