Сопоставить высоту div при переключении высоты другого div с vue.js

Question

У меня есть два столбца: левый и правый.Я хочу, чтобы левый столбец div соответствовал высоте правого столбца div.Правый столбец можно переключать между двумя разными div: красный и синий.

Я пытаюсь сделать так, чтобы левый столбец соответствовал высоте правого столбца.Таким образом, если синий столбец div равен true, div левого столбца будет иметь такую ​​же высоту, что и синий div, если красный столбец имеет значение true, тогда левый столбец будет иметь такую ​​же высоту, что и красный div.

примечание: будет больше, чем просто красный и синий div, который может выступать в качестве правого столбца.

Проблема, которую я получаю, заключается в том, что высота левого столбца div устанавливается до того, какrightColumn собственность.

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            blueLines: ['one', 'two','three'],
            redLines: ['one', 'two','three','four','five'],
            rightColumn: 'blue',
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.scrollHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        },
        rightColumnToggle(color){
            this.rightColumn = color;
            this.matchHeight();
        },
    },
    mounted() {
        this.matchHeight();
    }

});

.columns{
  width:300px
}
.left-column {
  float:left; width:200px; 
  border:solid 1px black
}
.blue-right-column {
   float:right;
   border:solid 1px blue;
   background: blue;
 }
.red-right-column {
   float:right;
   border:solid 1px red;
   background: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="rightColumnToggle('blue')">Blue Column</button>
    <button @click="rightColumnToggle('red')">Red Column</button>
    <br>
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div v-if="rightColumn === 'blue'" class="blue-right-column" id="info-box" ref="infoBox"> 
            
            <ul>
                <li v-for="line in blueLines" v-text="line"></li>
            </ul>
        </div>

        <div v-if="rightColumn === 'red'" class="red-right-column" id="info-box" ref="infoBox"> 
            
            <ul>
                <li v-for="line in redLines" v-text="line"></li>
            </ul>
        </div>

    </div>

</div>

Answer 1

Вам не нужен код Vue.js для этого.Для этого используйте CSS Flexbox:

<style>
    .columns {
        width:300px;

        /* USE CSS FLEXBOX */
        display: flex;

        /* This stretches the flexbox children to have max-height child */
        align-items: stretch;
    }

    .left-column {
        width:200px; 
        border:solid 1px black;
    }

    .blue-right-column {
        border:solid 1px blue;
        background: blue;
    }

    .red-right-column {
        border:solid 1px red;
        background: red;
    }
</style>