将图像动态渲染到DOM中。毛病效应

Question

每次点击按钮时，我都会尝试动态渲染一组问题和一个图像（彼此相邻）。

我正在使用bootstrap，这是我的代码。

    <div v-if="!submittedAnswer" class="row text-center" id="questions-container">
        <div class="image-holder col-sm-5">
            <img :src="questions[questionIndex].imgUrl" class="img-responsive" />
        </div>
            <div v-for="(item,index) in questions[questionIndex].choices" class="col-sm-7 text-center choice">
                <p class="shadow-effect
                " :class="{'active': activeChoiceId == index}" :id="index" @click="chooseAnswer">{{item}}</p>
            </div>
    </div>

可以看出，图像和问题集都在各自的列中呈现。我面临的问题是它们以一种奇怪的顺序加载，这反过来会产生一种看起来很奇怪的效果。我设法截断了发生的事情。

即使它们分成两个单独的列。第二列似乎在第一列的区域中部分呈现。然后，当图像渲染时，它会将它们推过来，从而产生一种看起来有问题的效果。

我尝试用边距，填充在它们之间创建更大的空间。或者使用flexbox，但问题仍然存在。

Answer 1

当您的视图呈现时，它呈现如下：

<div class="image-holder col-sm-5">{{ image }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
<div class="col-sm-7 text-center choice"">{{ answer }}</div>
.
.
.

由于自举网格有12个空格，所以“col-sm-7”div在第一个用新线条渲染后会阻塞，因为它们没有更多的空间可以渲染。

您需要做的是将所有答案都包含在<div class="col-sm-7">块中，以便正确呈现。像这样：

<div v-if="!submittedAnswer" class="row text-center" id="questions-container">
    <div class="image-holder col-sm-5">
        <img :src="questions[questionIndex].imgUrl" class="img-responsive" />
    </div>
    <div class="col-sm-7">
        <div v-for="(item,index) in questions[questionIndex].choices" class="text-center choice">
            <p class="shadow-effect
            " :class="{'active': activeChoiceId == index}" :id="index" @click="chooseAnswer">{{item}}</p>
        </div>
    </div>
</div>