Vue单选问题

Question

想用vue做这样一个功能，请教大家给点思路代码具体怎么实现第一步，(单选)点击选择需要的内容第二步，给用户展现用户刚刚选中的内容第三步，提交一个表单到后台

Answer 1

设置一个选中项，如aa，同时在每一项等于aa的时候，加上选中状态，在点下一步的区域把aa展示出来，在提交的时候，传到后台

<span v-for="(item,i) of items" :class="item===selectedItem?'selected':''" @click="selectedItem=item" :key="i">{{item}}</span>

Answer 2

先搞个数据结构出来，大体结构就是下面这样，把每个选中的都放在对应的分类下。然后第二页就是吧select弄出来就好了。也可以用index。

data = [

    {

        title: 'new',

        select: '',

        children: ['股票'，'科技' ,'产业']//单选的话，这样就蛮好的

    }，

    {

        title: 'hot',

        select: '',

        children: ['营改增'，'申报办税' ,'出口退税']

    },

]

<ul>

    <li  v-for="item of data">

        <h4>{{item.title}}</h4>

        <span v-for="c of item" :class="{'select': c.select == c}" @click="c.select = c">{{c}}</span>

    </li>

</ul>