063-尚硅谷-尚品汇-zoom放大镜展示数据-裁剪

那在休息的时候啊，咱做到哪，是不是做到了详情呀。详情上呢，咱们应该知道。数据是不是已经捞回来了？对吧，以及呢，有一些结构呢，咱们已经填充为服务器的数据了，比如说这里的数据。就这。对吧，以及。导航。这是不是已经变为服务器的数据了？那所以说接下来咱们需要。把这里。这个这这个咱曾经写过吧，是放大镜。以及底下的这个小图列表。这里的数据。以及。售卖的属性这里。咱们都要变，为什么？真实的数据。当然了，有的同学可能会说，老师，底下还有很多的结构啊。这里呢，服务器是没有接口的，也是没有数据的，所以说这里面底下这一部分咱们就可以打了。

可以不管了。OK吧？那咱们呢，一点点来，那老师问一下，想先搞这儿还是先搞这。行，那咱就先搞放大镜对吧，放大镜呢，应该是咱们在学什么的时候，先搞学倒的时候，学鼠标位置的时候。对不？像咱当年学学这个放大镜，应该是学了一文之后。获取鼠标位置，学了很多of X of set y。Screen screen y page s page y，还有SY之后是不是写了一个放大镜？对不行，那咱们呢，就先把放大镜这里的数，咱们先不写任何的逻辑，只是把它给它整了。展示出来。那首先说啊，老师呢，也一直在强调，别把voe的这个开发者工具当一个残废。一定要记住Vue开发者工具在工作的时候，它对于咱们调试程序是很重要的，所以说这个东西你得会用。

OK吧？看组件看谁。是不是看comp，看VR看谁是不是就V叉。对吧，所以说这个东西你千万你一定要给他，给他打，你就给我好好用用好吧。这个咱们先看一下子。那首先说对于咱们详情。咱们的路由组件咱已经搞定了，就路由咱是不是已经搞完了。对不，静态也搭完了，像服务器要的数据咱有没有，有咱得找找这是不是大仓库。大仓库下找哪个模块。Detail detail当中咱们看一下走，这是不是咱想要的数据。而且咱们看一下有没有想要数据计算出来。有吧，看这是不是有对不？那当然那咱们的已经用过谁了，是不是用过这个叫category这个数据。

开的谁是不是就是他？这里呢，就是咱们这个导航。这个咱是不是用过了。以及咱们产品的像这个标题啊，像这个详情这的数据咱也展示完了。那接下来咱们要把这块的数据给他进行展示。那这里的数据是哪一部分呢？咱们看一下。其实咱们已经计算好了，就是谁呢？就是这个叫SKU。阴风。就这。OK吗？因为那天老师也说了，也就说这个SKU info，它所存储的数据是包含哪里的？是包含，看着是包含。这的就老是圈中这部分就这部分。以及还有咱们这个放大镜的数据都在这里。OK吧，那咱们呢，先看一下子来瞄一眼啊。瞄眼他呢，应该是SKU info，就是产品信息里边的谁呢，咱们找一下。有一个叫做SKU image list。

你看这是不是图片的地址。对不，那这里呢，要注意一件事，什么事放大镜。看这啊，放大镜和底下的小图列表，他们所用的数据都是都是一样，你想想吧，用的是不是一样。老师问你，你说这个放大镜和这个底下这个小列表用的数据是不是一样，一定是的，为啥？你看。我点它是不是就是他。是不是就这张图片，我点它是不是就是它，所以说放大镜和底下这个小图列表做的数据是哪个是一样的。OK吧，那所以说来咱们一点点找啊看这。他们应该叫做SKU。啊，Info下的这个这个叫啥来着，SKU image例子，那咱们找一下啊，看这咱们先盯一眼咱们的仓库，仓库找人是不是找死啊。

底，那咱们看一下。这是不是咱计算出来。这玩意儿咱是不是直接能用。啊，这个还记得吧。就这是不是至少有个兜底啊。对不，那所以说回到咱们的路由组件当中找谁。是不是找底胎？对不，那你是不是要把仓库当中的数据。捞过来变为当前组建身上的书。对不对，对吧，而咱当年捞没捞。老，但没脑子。美入。诶，对不对，对吧，那咱们看咱们要用的是谁，用的是不是SKU info下的这个SQ image例子这条数据。对不？那老师问你啊，你是不是要把这条数据给谁送过去。是不是给当前dal的啥组件子组件，因为咱们应该知道看这啊，咱们的这个放大镜，看这放大镜是不是在这儿呢？这是两个什么组件。

子组件，那是不是因为现在数据在谁那呢。是不是在副组件这呢，那所以说咱们是不是可以利用什么。还自定义。哎呀，这个老师这这这这个这个说一下自定义事件是谁给谁。只给付啊，这地方你别别串味了。现在是谁？现在这俩玩意儿是不是属于当前底路由组件的什么组件？子组件父给子通信，那用啥？对不，那所以说看这那咱们一个说先给谁先给放大镜。OK吗？那放大镜你就要给他，那谁是放大镜是不是这。那你是不是得动态属性给他传递，那叫冒号。咱们叫啥叫SK叫啥玩意，不是叫以我看叫什么名字。

啊，不听你们的叫SKU image list，咱名字也叫这个好吧，叫SKU image list，那为什么呀。是不是应该是这个对象身上的这个属性的属性值。对不，所以应该是谁。S。Ku。info.sku image list。给的是一个什么？老师问。看这是不是数组，数组里面是不是有五个对象，这五个对象分别是啥？是不是五个？五个人是五张图片。对不？那父亲给了你儿子。是不是就收，那所以说咱们找一下谁，是不是找一下zoo这放大镜。那你收，你得用谁收啊？而且老师问你，Proper，咱当年学过几种写法？三种。数组对象。对不对吧，来，那咱这还采用谁啊，只要速度就行了，那这个咱们叫什么叫做SKU。

以昧之。List单词别说错了，送你俩字寥寥。OK吗？那唠叨之后呢，咱们先别着急，你先咋的？你是不是先看一眼再说啊？那数据没有，那你写什么呢？咱找下是不是字母有没有，有那老师问你啊，你说默认的这个放大镜应该显示第几张图。第一个对不对，对吧，那咱找一下子，那看这那你说你是不是需要把这个这个图，这个图应该是谁，这个图应该是底下这个背景。就就这个。旁边是不是有个有一个大图，大图是谁，大图是在这儿，你看这是不是有叫B。对不，咱们先说一下这个结构啊。这个以昧值是谁？以妹值就是这个。背景图，那咱们写一下，那这块应该写啥？老师问你，你是来写动态。是不是得冒号，那这块应该想是不是应该写的是SKU。

以例子呢？是个啥数组？它默认写的是不是第一张图，应该是数组的第零项，是个啥对象，对象看一下子忘了是啥。对象的啥？第零项是不是应该叫以妹纸？U。对不，那咱给他咋的点是不是他。这能动不懂吧，因为它默认显示的是不是第一张图，先不用看底下，你看是不是换图了。对不对吧，刚刚不是一个粉粉的吗？那么现在是不是换了对不？那以及你看右侧这个大图是不是你也得换成这个色，这明显这个右侧这个大图看这样是不是不对。那所以说来。看这啊，那这个是不是就那个大，那它也是一样，这来个啥冒号，你把这咋的。直接粘走是不是就完事了？我看一下啊。

看粘对对吧，但是他为什么要给红红的呢。将他红他的刷新，先看一下对不对。看这对不对。对吧，但你看一下子啊，先看这个图对不对，图没问题吧，当然咱还没写动态的，但是你看底下。诶，这是程璇最不喜欢的一个颜色。红色。对吧，程序员最不喜欢那个颜色，红色，他报错了，读导这是什么错了。首先说你看它对于程序有影响吗？没有，是不是又是假报错？什么叫假报错？一定是什么有问题，数据问题。对不？你看他读读什么错A。In render是不是在渲染时候的错误？什么错误？就是它不能读到哪个属性，0OF an啥意思？也就是说它的这个数组的第零项式啊是安底范，那为啥。

老师问你啊，哎，对，你这句话说的很对。就是仓库当中的这个数据啊，你看这儿。来看这样，这个老师很早以前就给你们打过预防针，就是仓库当中这个数据，老师问你最终是不是得向服务器发请求。服务器得返回之后是财务数据。那如果说服务器的数据还没有的返回，是不是按你换。对不，那咱一天一点，咱一点点推，你看他现在是不是报错了。报的什么错？他说是0OF anti饭，比如说那这玩意应该是个啥？就这个。他说数组第零项是个安底范，那至少说他是不是。可能是个空数组，也有可能是案底犯。对。也就是说你看他为什么说地理现在说老师我这在不能看见这数据没问题啊，你看这样。看这。说老师啊，咱看一下这个组件，组件这个深入的这个数据没问题是没问题。

但是前提是不是服务器的数据回来了之后，是不是才有这些。而这个老师，你这个子组建的术语是谁给的？父亲给。对不对，但是现在父亲给咱这个数据有没有问题。是不是可能会出现问题？你看咱可以试一下，你看老师给你来个啥。Moon mounted，走，老师先给你打印一下。这玩意儿是谁给父亲给的数据？父亲给的数据我进行测试，啥打印，那再看一下这点谁。SKU。以昧之。List你看吧，这应该是给咱们的啥什么数组。上西先看一下。你看。对不？老师问你啊，这个你看老师说老师这玩意是吗？你看我我我给你旁边来个啥。11111，你看是不是，这是不是父亲给。

对不对，比如父亲给数据的时候，他是个什么。你办，因为你要想明白，如果想要到那个束缚里边有那五个对象前提啥，是不是请求已经回来了。仓库当中已经有数据了，是不是才有那些东西，但你现在看到了，你看现在给的是多少。安底饭。那也就是说父亲给这玩意儿，他给的。不对，也就是说服务器的数据回来了。没有给的是不是一个空，不是是一个案底。诶，对不对，说老师这个问题我不处理行不行，行，你看还不影响啥。不影响。业务，但是你要把这个bug也不是bug，要把这个错误，你要想明白他为什么。对不？那你说现在父亲给的数据是不是有问题，他至少父亲至少给个啥玩意。就这玩意，至少是个啥。是不是给个空数据。佐罗，是不是这个道理？就是你给啥都行，但你不能给我案底吧，你至少是不是父亲给我的，是不是一个空数。

这能不能想通？你不能给我一个啥呀？案底饭案底饭你枚举，你不作死了吗？你什么时候见过这种写法？嗯。是不是就犯这个错误，那也就是说父亲给这个数据，前提你至少得给我个。红树。就这玩意是不是一个数据，那所以说父亲给数据的时候，他不能这么糊，他直接这么给。因为有可能服务器的数据没有回来，这玩意是不是一个空对象，空对象打点一个没有的属性，问你是不是。哎，知不知道老师在说啥？SKU音符是不是一个对象，对象的这个属性是不是一个数字。但是你要想明白，如果服务器的数据没回来。是不是一个空对象，空对象打点它没有的一个数据是不是。那是不是就按你班送去？就这能想通？咱先别自己搁这搁这猜想你看这。SKU info是不是一个对象，那假如服务器的数据没回来，我问你空对象打点一个没有的属性，我问你是不是按你了。

你送的是？所以说你这样给子组件直接改行了。不行，你是不是得有个啥。兜底。这能懂吗？就至少因为他要资源，要是一个数，你至少给人家是个啥，至少服务器数据没回，你至少是不是给空数。你至少不能让人家报错，你给人家案底饭，这能懂不？那所以说父亲在给数据的时候，你这块不能这么给你。你再计算一下。在这。让老师给他来一个吧，咱这个叫啥，这是给子组件的啥，是不是数据，老师给他计算一下叫SKU。以昧指啥例子？当然说老师，你必须叫这个名字吗？你不叫也行，你叫二哈泰迪他都可以。OK，不，只不过是不计给当前组件是不是计算出一个新的属性。OK吧，你看那也就是说啊，你给子组件的这个数据那个兜底，也就说Su info点谁SKU image list。

他可能是按底翻。也有可能是什么。服务器的数据是不是已经返回那个数组了，是不是有两种情况？就这老师还没写，自己能想通。能办？那假如是案底发，我能给安底发吗？不能，我至少给个兜底的谁。红手，这能看懂。这个能看懂啊，对，当然少了个谁。啊，这。有一说一，就这能看懂，就这个套路。这块一定要注意，就是说假如就说如果服务器的数据没有咋的。没有回来，那你这个SKU因因啥因否这个对象是一个啥，是一个空对象。而且这个SQ衣服你看咱是在哪处理的。

是在哪仓库？你看看。对不对。诶，对不对。诶对吧，所以这块一定要注意，如果是一个空对象，那老师问你打点一个没有的水平，是不是就是安全法。安底范也是转化成布尔是谁？放是不是取后者给送过去，那如果说服务器的数据有了，我是不是给服务器的。对不，那所以说你这块呢，那就直接写上，是不是就他就行了。这都不懂。是不是计算出来这个新的值。再给这能看懂吗？那这回咱们再看还有没有报错。刷新。还有。看这还有。但这回报的是啥？你妹你看现在老师问你啊，你看这这个是不是咱们在那个速度子组件是不是打印，你看现在至少给的是不是一个空数。这没问题了，但你看现在又报啥错了？你没那啥意思。

啥意思？现在我问你，他是个啥？空数组空数组的第零项老师问，你是谁？是不是还是同，是不是还是安底范，安底范有以妹URL这个属性吗。因为你要想明白一件事，什么事，如果服务器的数据回来了，这样。这玩意是不是应该是这样一个数组，数组里面应该有啥有对象，对象身上是不是才有这个数。那你现在眼睛你已经明显的看见了，他是个啥？空数组，那我问你。空数组的第零项是谁？氨底饭安底饭打点它是不是就报错？现在老师所有的假设的前提下，是不是服务器的数据没回来呢？这能懂不？你要把这个问题给就是说实话，就这个问题你不解决行不行。行。不影响你程序。这能走不，但是它出现了这个错误，你得知道怎么回事，说完前提是啊，是不是服务器的数据全没回来呢？

对不，那我说你你说这玩意咋回事。因为空数组里面是没对象，没对象导致了你这块咋的。是不能点属性，是不是又是安安底犯点啥，是不是又报错。就这块儿，你能这么搞吗？也不能这么搞。也就是说，你这个数组的第零项至少是个啥？是对象，你不能是啥，是不是案子犯？一环套一环，都整明白。比如说你这块的现在是个空数组，空数组第零项它不是个对象，它是安底范，安底范点你啥时候学没学过，比如说你数组的第零项，它至少是个啥。对不？至少空余项，如果说空余想打点一位ul，虽然得到是暗底方，但会报错吗？不会，只不过不显示这张图呗，但是底下是不不会有红色的那个那个那个警告。

那所以说你这块能这么搞吗。也不能这么搞，也还得咋的。哎，你看套路是不是行为，你再计算一下，就是让他枚举的D零号至少是个啥。空对象。对不，所以说这块呢，你再给他咋的，一层套一层烤P的，那咱这回起个名叫啥。咱们就叫做以妹纸OB勾，我说过，这玩意是不是叫啥都行。那也就是说，你让让谁让父亲给的这个数据就是谁，这点SKU叫啥玩意呢？Image list的第零项。那如果他是安底范，咱要不要？至少是个对象，说老师你你怎么知道就写对象。因为数组里面是啥呀。是不是就是对象？对不，那老师问你，那这块就可以换成谁。以妹纸。OB勾。那你看这回还有没有问题刷新。

啊，底下这是不是也得改对不？那这块也得改以may指谁OB勾。说老师啊，那以后我工作的时候，我看见了这个红色的警告，我不解决行不行，还是那句话行不行。行，它不影响的。你的程序，但是你要明白怎么回事。老师呢，一点点捋，因为咱们这个仓库写的年头有点晚了。有时间有点长了，你看咱咱看一下子看低碳，你看吧，咱一层套一层的。你看啊。首先说我问你这玩意是不是服务器返回的数据。咱应该知道是不是一个对象。看吧，老师给你咋的？找一下就谁找一下找一下。叫叫叫叫叫啥来着啊。呃，不是找仓库啊，找仓库看这。你看老师先把这全都给你打折上。你就看这，我问你这玩意儿接收的是不是服务器返回数据。对不，你看嘛，它起始是不是一个空对象。

看这其实是不是一个空对象，你看咱们在拿这个对象身上的那个SKU image list的时候，你看这不是SKU info的时候，你看这因为咱们产品的信息是不是全放在这个属性的属性值当中。咱是不是都做判断。对不，你看嘛。比如说SQ info它是个对象，那如果说你这块没有，我反过来是不是至少是一个空对象。这能看懂。看。如果要点SQE，假如服务器的数据没回来，我问你是个啥？空对象。被数控对象。那你空对象打点SQ音符，我问你你所有的子组件在捞仓库的数据，我问你捞的是啥。安底饭。空对象，他哪有SKU info这个属性没有没有是不叫安底了，但是咱们做了处理了，它至少是个什么鬼。看这是不是数速度是不是，你看速度是不是这个样子。

是不是应该对象，就是它至少应该是个啥，就是子组件至少捞的是个对象，而不是谁。安底饭，就这两碳的。给个回音，给老师个回音。给个回音。可以吧，那你看这是第一层仓库，完了你再看，再看谁。总结。谁是不是低碳？在组建当中，他想捞谁，是不是想捞他？叫SKU info，是不是它右侧的这个对象。那你看你有可能捞的是谁，是不是一个空对象？那你空对象打点SKU乙酶粒子，我问你捞的是谁？安米饭。因为咱刚刚看了仓库当中，是不是有可能说传的是不是空对象，那你捞的啥，是不是安底范，你安底犯别的子组件在用，咱刚刚也说了，是不是就报错了，安底范枚举低零号是不是就报错了？所以说如果是按底方，他是false，咱不要，就至少再给他的子间给个啥。

空数组，因为你看他为什么说是空数组，你看嘛。他下的它是不是数组。看这。对不对，不完了，那找谁是不是在找他的自主是不是给他了。捉摸list早餐就这。比如说他拉到数据之后，可能是个啥空数。对不对。诶，对不对，那你空数组的第零项可能是谁。安底饭，你安底饭一打点是不是又崩了？所以咱至少让它数组里面的元素，至少是个什么鬼。对象，所以这一层套一层，这能走。给个回音。能吧，所以说这块一定要注意，当然你工作当中不解决这个问题行不行。啊行，它不影响你程序，但是程序员一看见啥色。那红色就紧张了，特别是咱们。就一件一件到红色让你。三毛。

对吧，所以说这块一定要注意是怎么回事啊，好了，这是它。好了，那当然咱默认展示是D0兆。OK吧，好嘞，那这个老师。