javascript - vue 组件数据循环

问题描述

问 题

vue组件，把字符串切割为数组 然后循环输出结果报错

想得到下面这样的数据

#1岁-2岁 #早餐 #快手

var test = "1岁-2岁,早餐,快手";

<cook-tag :tags="test" />

Vue.component("cook-tag", {
    template: "<span class='tag-item' v-for='item in list'>#{{item}}</span>",
    data() {
        return {
            list:[],
        }
    },
    props: ["tags"],
    created(){
        this.list = this.tags.split(",") || [];
    },
})

解决方案

组件模板只能有一个父元素，需要把span包起来

这篇关于javascript - vue 组件数据循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！