Truy cập phần tử bên trong thành phần Vuejs

Question

Tôi đang cố truy cập phần tử từ phần tử dom trong thành phần Vue của mình nhưng tôi chỉ nhận được 'không'. Nếu tôi đi vào công cụ dev và thử tôi có thể truy cập nó. Tôi cho rằng đó là vấn đề phạm vi nhưng tôi không thể tìm ra câu trả lời.

<template> 
    <ul class="list-group" id="criteria" v-for="item in criteria"> 
     <li class="list-group-item">{{ item.name }}</li> 
    </ul> 
</template> 

<script> 
    export default { 
     template: "report-criteria", 
     data() { 
      return { 
       criteria: [] 
      } 
     }, 
     ready() { 
      console.log(document.getElementById('criteria')); 
     }, 
     methods: {}, 
    }; 
</script> 

Ai đó có thể giúp bạn?

Answer 1

VueJS 1.x

Bạn đang có lẽ dễ dàng hơn bằng cách sử dụng các v-el chỉ thị, cho phép bạn để lập bản đồ các yếu tố trong thành phần của bạn để một tài sản vm trên this.$els.

Ngoài ra, AFAIK, bạn không nên kết hợp thuộc tính template với các mẫu trong tệp .vue (giả sử bạn đang sử dụng .vue tệp, tất nhiên).

<template> 
    <ul class="list-group" id="criteria" v-el:criteria v-for="item in criteria"> 
     <li class="list-group-item">{{ item.name }}</li> 
    </ul> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       criteria: [] 
      } 
     }, 
     ready() { 
      console.log(this.$els.criteria); 
     }, 
     methods: {}, 
    }; 
</script> 

Answer 2

answer được đăng bởi @nils là dành cho VueJS 1.x. Chỉ thị v-el đã bị xóa trong các phiên bản mới hơn. Nó được thay thế bởi thuộc tính ref.

Để đạt được điều đó kết quả tương tự trong VueJS 2.x, bạn nên làm như sau thay vì:

<template> 
    <ul class="list-group" id="criteria" ref="criteria" v-for="item in criteria"> 
    <li class="list-group-item">{{ item.name }}</li> 
    </ul> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     criteria: [] 
     } 
    }, 
    mounted() { 
     console.log(this.$refs.criteria); 
    }, 
    methods: {}, 
    }; 
</script> 

Bạn có thể tìm thêm thông tin về sự thay đổi trong VueJS docs.