반응형
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
반응형
'programing' 카테고리의 다른 글
지정된 인덱스의 ArrayList에 개체 추가 (0) | 2022.08.24 |
---|---|
Vue 3 SFC 스크립트 설정 구문을 사용하여 Vuex mapGetters를 사용하는 방법 (0) | 2022.08.24 |
Vuetify는 불필요한 스크롤바를 추가한다. (0) | 2022.08.24 |
외부 웹 사이트를 링크하는 VueJs vue-router (0) | 2022.08.24 |
Vuetify - 양식에서 왼쪽 라벨 텍스트와 오른쪽 텍스트 필드를 수행하는 방법 (0) | 2022.08.24 |