はDOMに動的に画像をレンダリングします。グリッチ効果

Question

私は動的に一連の質問と画像（隣同士に配置）ボタンをクリックするたびにレンダリングしようとしています。

私は、ブートストラップを使用して、ここに私のコードですよ。画像と質問セットの両方がそれぞれの列に表示されていることが分かる。問題イムフェーシングは、彼らが順番に影響を与える探してグリッチを作成し、奇妙な順序で読み込むことです。私は何が起こるかをスクリーンショットすることができました。彼らは二つの別々の列に分割されているにもかかわらず

。 2番目の列は、最初の列の領域に部分的にレンダリングされているようです。その後、イメージがレンダリングされると、イメージが上にプッシュされ、バグのある見た目のエフェクトが作成されます。

私はマージン、パディングとそれらの間に大きなスペースを作成しようとしました。代わりに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>