VUE的v-for指令如何交替添加DOM节点？

Question

要实现一个电影点评框，先选中电影名，然后输入评论，点击提交显示结果。
问题：用vue的v-for指令时，电影名只能挨着电影名，不能在电影名下面接着评论结果，效果如图

代码如下：
HTML部分：

<div id="comment">
        <h3>查看评论</h3>
        <div>
            <h4 v-for='title in titles'>
               {{title.text}} 
            </h4>
            <p v-for='item in items' >
                {{item.text}}
            </p>
        </div>

        <label class="radio-inline">
          <input type="radio" name="movieName" class="movieName" value="大护法" checked='' v-model='heading' />大护法
        </label>
        <label class="radio-inline">
          <input type="radio" name="movieName" class="movieName" value="大鱼海棠" v-model='heading'/>大鱼海棠
        </label>
        <label class="radio-inline">
          <input type="radio" name="movieName" class="movieName" value="大圣归来" v-model='heading'/>大圣归来
        </label>
        <textarea class="form-control" name="comments" id="" cols="30" rows="10" v-model='review' placeholder="inter your comments"></textarea>
        <button class="btn btn-primary" @click='addNew'>提交</button>
    </div>

Vue部分：

 var app =new Vue({
        el: '#comment',
        data: {
            titles: [],
            heading: '',
            items: [],
            review: ''
        },
        methods: {
            addNew: function () {
               this.items.push({
                   text: this.review
               });
               review: '';
               this.titles.push({
                   text: this.heading
               });
               heading: '';
            }
        }
    })

Answer 1

方法一

<div>
  <template v-for='(title, i) in titles'>
    <h4>
       {{title.text}} 
    </h4>
    <p>
        {{items[i].text}}
    </p>
  </template>
</div>

方法二

设一个 computed 值，比如 titleItem

computed: {
    titleItem () {
        return this.titles.map((x, i) => ({title: x, item: this.items[i]}))
    }
}

然后就可以对 titleItem 进行 v-for

Answer 2

看了看楼主的代码，既然使用了数据驱动的框架，就摒弃掉一些原来的dom驱动的编程思维
我的建议是，修改数据结构，然后修改dom结构
首先可以减少代码量，最主要的是逻辑更清晰
修改数据结构为：

currentFilm : 0,    //指向当前选择的影片
filmData:[
    {
        title: '大鱼海棠',
        descript: '大鱼海棠好看'
    },{
        title: xxx,
        descript: xxx
    }
],    
heading: '',
review: ''

然后修改html结构为：

<div>
    <template v-for="item in filmData">
        <h4>
            {{item.title}} 
        </h4>
        <p>
            {{item.descript}}
        </p>            
    </template>
</div>

最后下面的单选按钮也可以用该方式渲染，且label感觉无意义，都是行内元素，label样式可以直接写在input上，
其实建议下面修改这款可以换一个结构，因为修改的都是filmData的内容，直接用一个currentActive作为索引，再用review作为暂存器，如果点击修改按钮就修改filmData[currentActive].descript = review

Answer 3

照你这样写，你可以用样式去控制。把他俩放在一行 两列，就对上了。
要么就改结构，把电影名字和描述放同一个数组发过来。