Vuejs를 사용하여 요소 높이 가져오기
나는 div의 높이를 얻고 싶다. div의 높이를 다른 div의 높이에 맞추기 위해서.나는 메서드 클라이언트를 사용했다.키, 하지만 좋은 값(작은 값)을 돌려주지 않는다.사실 모든 원소가 충전되기 전에 높이를 되돌리는 것 같다.온라인으로 몇 가지 조사를 한 후, 나는 모든 것이 충전될 때까지 지연시키기 위해 윈도우.load()를 넣으려고 했지만, 그것 또한 작동하지 않는다.아이디어는?
mounted () {
this.matchHeight()
},
matchHeight () {
let height = document.getElementById('info-box').clientHeight
}<div class="columns">
<div class="left-column" id="context">
<p>Some text</p>
</div>
<div class="right-column" id="info-box">
<img />
<ul>
some list
</ul>
</div>
</div>네가 하는 방식은 괜찮다.그러나 a를 통한 또 다른 구체적인 방법이 있다.ref기여하다
mounted () {
this.matchHeight()
},
matchHeight () {
let height = this.$refs.infoBox.clientHeight;
}
<div class="columns">
<div class="left-column" id="context">
<p>Some text</p>
</div>
<div class="right-column" id="info-box" ref="infoBox"></>
<img />
<ul>
some list
</ul>
</div>
</div>
이 경우에는, 당신이 단지 가치를 얻고 있기 때문에, 당신이 원래의 것을 사용하든 상관없다.getElementById접근 또는 세부 사항ref다가오다그러나 요소에서 값을 설정하고 있다면 이 값을 사용하는 것이 훨씬 낫다.refvue가 값이 변경되었음을 이해하고 DOM에서 노드를 업데이트해야 하는 경우 값을 원래 값으로 덮어쓰지 않도록 접근하십시오.
자세한 내용은 https://vuejs.org/v2/api/#vm-refs를 참조하십시오.
갱신하다
몇몇 사람들은 위의 해결책이 그들에게 효과가 없다는 의견을 남겼다.그 솔루션은 개념을 제공했지만 완전한 작업 코드는 아니었다. 그래서 나는 그 개념을 보여주는 아래의 코드로 나의 대답을 강화했다.
var app = new Vue({
el: '#app',
data: function () {
return {
leftColStyles: { },
lines: ['one', 'two','three']
}
},
methods: {
matchHeight() {
var heightString = this.$refs.infoBox.clientHeight + 'px';
Vue.set(this.leftColStyles, 'height', heightString);
}
},
mounted() {
this.matchHeight();
}
});.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }<div id="app">
<div class="columns">
<div class="left-column" id="context" v-bind:style="leftColStyles">
<p>Some text</p>
</div>
<div class="right-column" id="info-box" ref="infoBox">
<img />
<ul>
<li v-for="line in lines" v-text="line"></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
다음은 브라우저의 결과 스크린샷:
참고:
내 대답은 당신이 cdn이나 로컬에서 브라우저로 vue.js를 로드하여 실행한다고 가정한다.대신 당신이 cli를 통해 당신의 코드를 실행하고 있는데 내 대답이 당신에게 통하지 않는다면, @mayank1513의 대답을 대신 봐주십시오.
문제 해결에 많은 시간이 걸렸다.처음에 나는 론 C의 대답을 따르려고 노력했다.얻으려고 하는 중this.$refs.infoBox.clientHeight;그냥 효과가 없었다. 확실하지 않게 되었다.
그리고 나서 나는 그 곳을 탐험했다.this.$refs.infoBox반대하다
와!!!!! 그가 쓴 코드가 그와 다른 모든 사람들에게 어떻게 작용하는지는 모르겠지만, 그 어떤 재산이라고 불리는 것도 없었다.clientHeight. 드디어 안으로 들어갔다.$el.
그래서 우리는 교체해야 한다.this.$refs.infoBox.clientHeight;와 함께this.$refs.infoBox.$el.clientHeight;
이건 그냥 나한테 잘 먹혔어.
갱신하다
nuxt를 사용하는 동안this.$refs.infoBox.$el.clientHeight;소용없었지만 론 C의 대답은 이 사건에서 통했어 this.$refs.infoBox.$el.clientHeight;사용하는 동안 효과가 있는 것 같다.@vue/cli
flexbox를 사용하여 동일한 높이 열(https://css-tricks.com/snippets/css/a-guide-to-flexbox/)을 얻으십시오.
.container {
display: flex;
}
.column {
border: 1px solid;
padding: 20px;
width: 150px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
sit amet ornare fringilla, ligula quam faucibus urna
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</body>
</html>참조URL: https://stackoverflow.com/questions/44948714/get-element-height-with-vuejs
'IT이야기' 카테고리의 다른 글
| 행 삭제 후 Boostrap-Vue 테이블 새로 고침 (0) | 2022.03.08 |
|---|---|
| 기본 키 반응 - 플랫리스트와 함께 키 추출기 사용 (0) | 2022.03.08 |
| vuexfire가 상태를 업데이트하지 않고 UI를 올바르게 업데이트하는 이유 (0) | 2022.03.08 |
| Python에서 URL 매개 변수를 백분율 인코딩하는 방법은? (0) | 2022.03.08 |
| Vue의 하위 구성 요소와 개체 속성 동기화 (0) | 2022.03.08 |