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

问题描述

问 题

要实现一个电影点评框，先选中电影名，然后输入评论，点击提交显示结果。
问题：用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: '';
            }
        }
    })

解决方案

方法一

<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

这篇关于javascript - VUE的v-for指令如何交替添加DOM节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！