使用 transition-group 出现warnings

请问老师：

为什么我将ul 改成 transition-group，就出现黄色的提示，请问怎么解决？

慕小庄 2019-08-29

源自：实战：Vue 完成分类、搜索页 2-5 历史搜索

收起

4回答

卡布琦诺回答被采纳获得+3积分 2019-09-04 12:08:10

建议同学修改如下尝试一下哦，如果还是不行，建议上传完整代码，包括下面的js和css样式

<transition-group class="g-list" name="list" tag="ul" >
    <!-- v-for="(item, index) in historys" -->
    <!-- v-bind:key="index" -->
    <li 
    class="g-list-item"
    
    v-for="item in historys"
    v-bind:key="item"
    v-on:click="$_selectItem(item)"
    >
    <span class="g-list-text">{{item}}</span>
    <i 
    class="iconfont icon-delete"
    v-on:click.stop="removeItem(item)"
    ></i>
    </li>
</transition-group>

希望可以帮到你！

收起回答

慕小庄提问者 #1

完美解决，请问老师，一般v-bind:key="item" 不是绑定的index吗？为什么这里可以绑定 item？

2019-09-04 13:30:26
卡布琦诺回复提问者慕小庄 #2

因为传递的参数是item哦，比如：v-on:click="$_selectItem(item)"、v-on:click.stop="removeItem(item)"、v-for="item in historys"、<span class="g-list-text">{{item}}</span>

2019-09-04 13:35:29
慕小庄提问者回复卡布琦诺 #3

谢谢老师！

2019-09-04 13:39:09

提问者慕小庄 2019-09-03 22:57:46

<transition-group class="g-list" name="list" tag="ul" >
    <li 
    class="g-list-item"
    v-for="(item, index) in historys"
    v-bind:key="index"
    v-on:click="$_selectItem(item)"
    >
    <span class="g-list-text">{{item}}</span>
    <i 
    class="iconfont icon-delete"
    v-on:click.stop="removeItem(item)"
    ></i>
    </li>
</transition-group>

老师，我改来改去，还是有一点问题，能不能麻烦老师直接点出我需要改成什么样子？

收起回答

卡布琦诺 2019-08-30 19:45:20

建议同学将这一页的完整代码贴上来，不要截图哦，老师帮你检测一下，另外，关于报错信息，一般报这个错，是因为在select上面绑定整个返回的数据值，但是展示只显示一些name,并且可以多选，就会出现这样的报错，参考解决办法：

<el-select v-model="syncParams.toSlaveList" multiple value-key="ip">
<el-option
v-for="item in slaveList"
:key="item.ip"
:label="item.ip"
:value="item">
</el-option>
</el-select>

希望可以帮到你！

收起回答

好帮手慕码 2019-08-29 19:20:11

同学你好！

问题应该在li中，v-for遍历的时候是需要一个key值的，建议同学在v-for后面添加key值，例如：

不过这只是一个警告信息，不会影响代码效果实现的，可以不用在意它。

如果帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕小庄 #1

请问老师，在范例中，我的写法是 v-for="(item, index) in historys" v-bind:key="index" ，这样会报错，但是如果我写成和老师一样 v-bind:key="item.id" 就没有报错了，请问是为什么？

2019-08-30 10:58:26
提问者慕小庄 #2

老师，我将代码改成 v-for="item in historys" v-bind:key="item.id" 不知道为什么会报错 [Vue warn]: <transition-group> children must be keyed: <li> ，请老师帮忙解决，谢谢您。

2019-08-30 11:17:10