やりたいこと
- 複数のコンポーネントでaxios通信し、全てのコンポーネントのレスポンスが帰ってきたら要素を表示する
- コンポーネントは正方形で表示する
- もちろんIE対応????
コード
vue
1<template lang="pug"> 2div 3 content-component( 4 v-show='allContentsLoaded' 5 component-key='a' 6 @content-loaded='setLoaded') 7 content-component( 8 v-show='allContentsLoaded' 9 component-key='b' 10 @content-loaded='setLoaded') 11</template> 12 13<script> 14import contentComponent from './contentComponent.vue'; 15export default { 16 components: {contentComponent}, 17 computed: { 18 allContentsLoaded() { 19 return Object.keys(this.loaded).reduce((accumlator, key) => { 20 return accumlator && this.loaded[key]; 21 }, true); 22 } 23 }, 24 data() { 25 return { 26 loaded: { 27 a: false, 28 b: false 29 } 30 }; 31 }, 32 methods: { 33 setLoaded(key) { 34 this.loaded[key] = true; 35 } 36 } 37}; 38</script>
vue
1<template lang="pug"> 2div コンテンツ 3</template> 4 5<script> 6let observer; 7export default { 8 props: ['componentKey], 9 mounted() { 10 axios('/url').then(() => { 11 this.$emit('content-loaded', this.componentKey) 12 }) 13 this.setHeight(); 14 observer = new ResizeObserver(() => { 15 this.setHeight(); 16 }); 17 observer.observe(this.$el); 18 }, 19 methods: { 20 setHeight() { 21 this.$el.style.height = `${this.$el.clientWidth}px`; 22 } 23 }, 24}; 25</script>
問題
全てのコンポーネントでのaxios通信が完了するまではallContentsLoaded
がfalse
のため、
親のDOMにdisplay: none;
が当たっており、clientWidth
が0になるため、うまくいきません。
上記コードでは、ResizeObserver
を使って実現できるのですが、ResizeObserver
はIEで対応していないため使えません。
ResizeObserver
に代わるインターフェイスや、ロジックありますでしょうか..
あなたの回答
tips
プレビュー