Vue JS v-hight (overflow-y)를 확장하지 않는 생성 된 구성 요소에 대해

사용자가 노트를 추가하고 편집 할 수있는 작은 노트 앱을 만들었습니다. 이 notes-app는 사이드 바 내부에 있습니다 (트위터 부트 스트랩).Vue JS v-hight (overflow-y)를 확장하지 않는 생성 된 구성 요소에 대해

사용자가 측면 높이 내에서 표시 할 수있는 것보다 많은 메모를 추가하는 경우 측면이 스크롤 가능하게 만들어서 확장되지 않는 것이 문제입니다. 그들은 단지 페이지의 가시 영역 너머로 표시됩니다.

하드 코딩 된 구성 요소를 사용하여 테스트했으며 스크롤 할 수 있도록하여 측면 높이를 확장했습니다. 생성 된 구성 요소가 인식되지 않는 것과 같습니다.

HTML

<aside class="control-sidebar control-sidebar-dark" id="notes_sidebar"> 
       <div class="tab-content"> 

        <div class="col-md-3"> 
         <h2 class="control-sidebar-heading"> 
          Your Notes 
         </h2> 

         <ul class="control-sidebar-menu"> 

          <li> 
           <a @click="addNote()"> 
            <i class="menu-icon fa fa-plus bg-green"></i> 
            <div class="menu-info"> 
             <h4 class="control-sidebar-subheading">New Note</h4> 
            </div> 
           </a> 
          </li> 

          <li v-for="note in notes" transition="fade"> 
           <a @click="setActive($index)"> 
            <i class="menu-icon fa fa-sticky-note-o bg-yellow"></i> 
            <div class="menu-info"> 
             <h4 class="control-sidebar-subheading">{?{ note.name }?}</h4> 
             <p>{?{ note.date }?} <span class="fa fa-minus-circle fa-2x pull-right text-red" @click="deleteNote($index)"></span></p> 
            </div> 
           </a> 
          </li> 

         </ul> 

        </div> 
...

사람이 이런 일이 어떻게 VUE를 만드는 생성 된 구성 요소 오버 플로우 - y를 스크롤 너무 이유를 알고 있나요?

출처

2016-08-26 tobysas

jQuery를 사용하여 사이드 바에 물건을 삽입하여 동적으로 커지는 것을 확인 했습니까? 테스트 한 것과 Vue 빌드 사이의 구조 (예 : 추가 컨테이너)에 대해 다른 점이 있습니까? –

그냥 jQuery와 함께 시도해 보았는데 잘 동작합니다 (오버플로 -y 스크롤 가능). 동일한 구조가 없으며 동일한 요소를 복사/붙여 넣기하여 수동으로 채 웁니다. – tobysas

컨테이너에 높이 제한이 있는지 확인할 수 있습니다. 비슷한 문제가 있었는데 부모 컨테이너에서 '최대 높이'를 발견했습니다.

출처

2017-06-19 11:51:52

Vue JS v-hight (overflow-y)를 확장하지 않는 생성 된 구성 요소에 대해

답변

관련 문제