【vue】vue遍历数据需要填充到input的value属性中
阅读: 682 回复: 0

发布于:2021-11-28

问题描述

value获取不到值

解决方案

这位同学在使用vue的时候 模板的语法有问题,单眼一看是php的写法,我们开始进行问题分析

第一步: 我们在遍历一个数据对象的时候,如果要在input 中回显数据通常应该用 v-model来进行

                数据双向绑定,当然也可以用 :value="item.id" 只是这种写法不会做数据的双向绑定。

               因此以上的正解应该是将 value="<?= $item['id']?>" 改为 v-model="item.id"

第二步:我们在他的问题描述最上面看到的 数据项也就是 biggoods_list 中嵌套有数组元素

              那么我们还需要从后端获取到这个元素的时候将其进行数组到对象的转换也就是需要将

             

             转为 {id: 4100, goods_id: 4100, pic_url: 'http://exxxxx'} 这样的好处是 数据顺序不会和索引进行强耦合,是想如果他的索引内容的位置如果发生变化,前端代码的展示将会出错。


第三步: 这里不能使用php的语法主要是因为php属于服务端渲染,我们这里做了前后端分离后,是通过vue做前段渲染的,所以 php的语法当然无法生效了,如果是服务端渲染的话应该语法整体为:

 <?php  for($index = 0; $index < count($list); $index++) {?>

               模板
<?php?>  

录屏实操

录屏暂未发布,请耐心等待