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 = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; title: 'new',&nbsp; &nbsp; &nbsp; &nbsp; select: '',&nbsp; &nbsp; &nbsp; &nbsp; children: ['股票'，'科技' ,'产业']//单选的话，这样就蛮好的&nbsp; &nbsp; }，&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; title: 'hot',&nbsp; &nbsp; &nbsp; &nbsp; select: '',&nbsp; &nbsp; &nbsp; &nbsp; children: ['营改增'，'申报办税' ,'出口退税']&nbsp; &nbsp; },]<ul>&nbsp; &nbsp; <li&nbsp; v-for="item of data">&nbsp; &nbsp; &nbsp; &nbsp; <h4>{{item.title}}</h4>&nbsp; &nbsp; &nbsp; &nbsp; <span v-for="c of item" :class="{'select': c.select == c}" @click="c.select = c">{{c}}</span>&nbsp; &nbsp; </li></ul>