00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成销售属性的展示。那咱们呢,去看一下的已经完成的这个项目。那咱们的目前而言呢,还是在处理po管理这个模块。那比如说啊,老师选择一个一级分类,比如说图书。电子书刊以及电子书,那么当三级分类被确定的时候啊,那咱们呢,会在这里呢进行展示po的列表。对吧,那么咱们呢,现在正在处理的呢,是修改PU的业务逻辑。那当然老师也说过,如果修改的业务完成之后,那对于添加po的业务逻辑呢,也就会很快的去完成。那咱们呢,先看一下呢,咱们正在开发的这个修改po的这个业务。那么首先说啊,对于po的名称对不?那么对于po的名称的展示以及数据的收集,咱们已经做好了。
01:10
那比如说获取到的服务器的数据,我可以进行展示,那么以及用户将来,诶,你修改了po的名称,那也是要收集数据的,因为将来需要把这些数据提交给服务器进行更新。对吧,那对于po的名称啊,对于数据的展示以及收集已经完事了。那以及品牌,那对于品牌的数据展示,OK,没问题,咱们已经完成了,那么以及对于品牌收集他的数据,咱们也完成了,就是收集你选中的那个品牌的ID。那以及对于po的描述啊,咱们对于数据的展示以及收集也完成了。对吧,那这里呢,要注意一件事,什么事,对于PU的名称,那么任何一个PU都有属于自己的PU的图片。
02:06
那这里呢,要注意一件事,这里面用到了一个照片墙。那对于po图片这里呢,那咱们呢,现在只是完成了对于照片墙的展示,但是对于数据的收集呢,还是没有做的。那比如说有哪些情况呢,你还要收集数据呢,那比如说现在已有的是这张图,那我删除了,那你是不是要收集数据提交给服务器,对吧?或者是你新增一张图片,那你也要收集数据提交给服务器。所以说对于PU图片这一部分业务,咱们呢,只是完成了对于照片墙的展示,而对于数据的收集呢,咱们呢,在下面的课程当中会进行讲解。对吧,那接下来呢,咱们要完成的是什么呀,完成的是销售属性的数据的展示。啊,什么叫数据的展示呢?只是把这些数据给他展示出来,那么目前而言,咱们呢,先不进行数据的收集。
03:08
OK吧,那销售属性呢,这里面呢,老师呢要说说。这块呢,要注意一件事,就是咱们整个项目当中,那么销售属性啊,一共就是几个,一共是三个。分别是什么呢?分别呢是颜色。按尺码,按尺码和版本。其实对于这个平台当中所有的销售属性啊,咱们已经拿到数据了,但是一定要注意,咱们整个项目当中销售属性一共是几个,一共是三个。那这里呢,要注意一件事,那不管对于是哪一个PU。对吧,就是哪一个类,那么它都有属于自己的销售属性。那就比如说对于电子书杠武侠这个PU,那么它有属于自己的销售属性是几个是一个是颜色,那它还有几个销售属性没有被选择,那一共是三,那还有就两个没被选择呗。
04:16
对吧,所以说这块呢,要注意一下子,哎,而且你看所有的销售属性分别是颜色版本和尺码,那自己已经有的是颜色,那未选择是不是就是这两个。那这块呢,要注意一下,那以及咱们看一下已经完成了这个项目,有一个地儿,你看这块的效果啊,你看啊添加,比如老师再给他添加一个属性值,比如说叫二哈。对不?哎,你会发现这块呢,有这样的一个小功能,其实这个小功能啊,用的是饿了么UI当中的一个UI组件,哎,咱们一会儿回去聊聊。对吧,啊行,那回到咱们的项目当中。那咱们呢,去看一下咱们的项目啊,那比如说老师来一个图书。
05:03
电子书刊。电子书对吧,比如说我现在想修改电子书杠武侠这个PU对吧,你进行修改。那咱们呢,已经完成了前面这几项,那对于销售属性这里呢,咱们呢还没有完成。对吧,那所以说找到咱们相应的组件,那应该是咱们的,呃,PU下的PU form这。对吧,那咱们已经完成了,呃,前面这几个对吧?啊,而且对于PU图片老师也说了,后期咱们会去收集相应的图片的信息,咱们目前对于照片墙呢,只是把数据给他展示出来即可。对吧,那所以说接下来咱们要完成什么,完成这个销售属性的数据的展示。对吧,那么在写东西之前啊,咱们得先看一下数据。那首先说对于当前的电子书,这个PU是有属于自己的销售属性的。
06:05
咱们呢,可以看一下咱们的数据来。看一下咱们的数据,那应该呢,是咱们的APP面下的这个PU放这里。那首先说啊,咱们的从服务器已经拉取了四个数据,对吧,那对于这条数据呢,就是PU当前的这个PU自己的信息。对不,那么对于当前的这个PU啊,它自身呢,是有属于自己的销售属性的,这块一定要注意。而这块儿呢是什么,这个数据是什么呢?是整个平台当中所有的销售属性。这块一定要注意c at tr list等于数组,数组里面有三个元素,这三个元素是什么?是整个平台。所有的销售属性一共是几个?一共是三个,分别是颜色、尺寸和版本。
07:00
对不,咱可以随便点击看一下子,对吧,这块要注意一下子。那咱们要注意一件事,什么事,那么你需要现在把已有的PU的销售属性是不是给他展示出来。那任何一个PU都有属于自己的销售属性,那咱们可以看一下这个po。那这个po呢,是电子书武侠对吧?描述是好看,它有属于自己的销售属性。那你这块呢,要注意一件事,这块呢咱们是用table去展示相应的销售属性以及属性值,那table所需要的数据一定是数据。对不,那所以说你看它的属性值是不是一个数组,而这个值代表的是什么,代表的是当前。电子书杠武侠这个PU已有的销售属性,这几个是一个。对不,那么他现在有的销售属性是什么?是颜色,那以及也有它相应的销售的属性值。
08:00
对不,那所以说咱们在table这要把当前的这个PU的销售属性给它展示出来。那展示出来呢,那就需要找到咱们的这个table,先把这个table先给他做了。对吧,这个下拉框和这个按钮,咱们先不管是不是先处理这个table。对吧,那么他要展示数据,那这块呢,要注意那这个table展示的是什么展示。的是哎,是当前PU属于自己的销售属性。那当然,它显示数据需要用到谁,需要用到date。哎,Date,那date等于什么?是不是应该等于PU点点谁是不是点咱们的这个看一下它的这个字段应该是叫做s PU CU drr粒子。对不,这不就是PU销售属性列表吗?那所以说咱们呢,把它给他带过来,那你就应该会看到啊,这个table应该有一列了。
09:04
对不,因为他有属于自己的销售属性,是几个是一个。那所以说啊,咱们呢,测试一下数据,如果有问题,那赶快去修改,没问题那咱就接着继续了。对吧,那当然咱们呢,还是看咱们的这个图书吧。啊,其实咱们已经看到数据了,那应该是没有问题的。对不,那所以说这块的数据呢,一定要给他看懂了,那接下来呢,咱们呢,就把相应的数据啊给它展示出来。那对于当前的这个电子书,这个PU是有属于自己的销售属性的,那属性名叫做什么呢?咱们呢可以看一下。那么属性名,哎应该叫做颜色对吧,这个字段呢,叫什么叫做cor name。那你这块要注意table现在展示的是谁,现在展示的是这个PU下的这个Co tr list这个数组。
10:01
那它这里面呢,你要展示哪个字段,是不是要展示属性名,那属性名应该是这个数组当中这个对象的某一个字段,哪个字段是不是就这个字段叫做c at tr name。那所以说啊,咱们的应该是第几列,应该是第二列要展示属性名,那属性名是谁,是不是就是它。对不,哎,这个这这这个这个复制跑偏了,对吧,叫做Co AR name。那咱们可以刷新看一下,其实已经看见了,是不是就是颜色。对不?所以说这块呢,要注意注意,咱们可以获取到当前PU自身的销售属性有一个什么呢?是颜色,而这个销售属性呢,有相应的销售属性值,而它的销售属性值应该是谁?不是这个私有a tr name的,这是啥?这是销售属性,销售属性值应该叫做CU a tr value流name value啥意思值嘛。
11:00
销售属性值对吧,叫做本。那但是这块呢,要注意这块的结构,用到了饿了么当中的一个组件,就是谁呢?咱们刚刚也看到已经完成的一个项目,其实就是谁,就是tag。咱们可以找一下这个tag,苏老师是这个吗?这个也你看一下人家的这个啊,你先看一下人家的这个。对不,人家这个是不是带叉子的1.i,还有过度动画对吧,以及添加你看对不?其实这个不就是咱当年做的那个SPA和input的那个切换。其实用到谁,用到的就是EL-tag用的是谁,你看这块是不是有叉子。对吧,其实用的就是它,你看这不有个按钮嘛,旁边这不都是那种呃标签嘛,而且一点是不是带动画,其实就是它。那所以说啊,咱们呢,把它相应的结构给他带过来。对吧,其实这块的结构啊,说多不多,说少也不少,那么在使用的时候一定要注意给它对准了。
12:00
对吧,那咱们呢,先把它的结构给它带走。对吧,那这一块呢,咱给他带走,那应该放在哪,是不是放在咱们销售属性值这对吧,销售属性咱们已经展示出来了,销售属性值用的是这个tag进行展示。那所以说这块呢,是需要结构的,所以说咱们得需要使用咱们的作用与插槽。对吧,那当然这块呢,有相应的肉和Dollar index,那肉是谁?肉不就是销售属性吗?对吧,你要注意肉是啥,肉是销售属性,那这里面要展示的是什么销售属性值。那咱们呢,把它的结构给他带过来。对吧,那老师呢,先给他格式化一下这个结构啊,咱们呢一会儿再说,因为这个结构你现在这么看比较恶心,咱们呢,一会儿给他来一个横排去看。那除了这块的结构呢,还要注意人家也有样式,但是要注意样式是没有加scar,那咱们呢,也把人家的样式也带走,你看为什么说要带样上,那他这是不是有类名叫ER tag。
13:02
你看顶上有没有类名的?咱们找找有没有什么什么new t,他一定是有写自己的样式。对吧,所以说呢,咱们呢,把人家的样式给他带走对吧,要注意人家没有加高,那咱们也就不需要加对吧,所以说结构样式给他带走。那剩下的就是顶上这块的结构,咱们要细细的去聊聊了。那首先说EL-tag是谁?EL-tag其实就是这个。对不,这是tag,这是啥?你看这这是啥,这是input。那这是啥?这是button?对吧,所以说你看你可以奔行的,比如说这是死办。这是一个元素,对吧?这是个input,这是第二个元素,以及还有个按钮是三个元素,所以说是对应的这三个结构,Tag input和button。对吧,那所以说tag是谁,Tag就是咱们现在看见的这个这个结构。对吧,那所以说来咱们的一点点调调,那首先说咱们的销售属性值是很多的,将来一定是要便利的。
14:07
Soon we gone for。那以及它也在加,加什么,是不是给被根号,是不是得加K。对吧,咱们一点点调来,先给它挪上来。冒号K。对吧,以及V杠放在便利销售属性值那,以及这个closeible是它的一个属性,其实就是那个叉子按钮。那以及这块呢,还有什么,呃,能不能用那个过渡动画,就是一点叉的时候,有没有那个过渡动画,对吧,那这些咱们不需要去发生变化对吧?那以及它还有个事件就1.1叉的毁掉。这个叉子就是那个死瓣,你可以认为是死瓣,右上角是不是有个叉子?对吧,这块呢,老师呢,先给他先把数据呢,先给你们展示出来啊,这个老师先给他挪上来。看这咱们先把这个结构先整整。那首先说看这他这块写事件,咱们现在目前而言啊,只是展示数据,那这个事件的咱们先给他干的。
15:04
这个事件老师先给他干掉,其实这个事件是什么?就是这个叉子,你看已经写好,这个就是这个叉子的事件。对吧,咱们先给它关掉。那以及啊,咱们再往底下看看吧,咱们先把数据先给它展示出来。那首先说tag展示的是什么?展示的是销售属性的属性值,所以说这块得V-for便利,那tag印印谁你应该印的?来看下咱们的这个你应该便利的是。当前的,哎,这个没数据是吧,那咱们进来一下,它便利的应该是。咱们找一下子这个PU看这啊,它便利的应该是当前的销售属性的销售属性值。所应该写谁呢?应该写咱们的肉点它。对吧,咱们先把数据给他展示出来,那应该是tag印印谁应该便利的是销售属性的销售属性值。
16:07
对不,那咱们看销售属性值有没有相应的ID。是不是有ID,那所以说这块的K呀,你就可以写什么,是不是写咱们的这个叫tag.id。那要注意tag是什么?Tag就是每一个销售属性值了。直的ID。对吧,那咱们呢,这块呢,你该写什么,你不能写它写它是个对象了,你应该写的是销售属性值。哎,销售属性值的这个叫做Co a tr外流name对吧,销售属性值嘛,所以说呢,咱们这儿呢,也给他改一下子来看这第二它。但是底下这块呢,有一些东西咱们还没写呢,比如说一些回调可能会报错,但没关系,咱们先看一下子静态有没有。对吧,哎,你看这至少说这玩意是不是有个相应的静态了。对不啊,你的静态是不是已经有了。
17:02
所以说对于这块的数据结构得给我看懂,老师再说一遍。把这块的结构一定要看懂。那首先说PU是你正在修改那个PU,它是有属于自己的销售属性的,是一个颜色。那以及颜色也有属于自己的销售属性值在这里,而现在咱们展示的是什么?是属性值名称列表。对不,所以说这块的数据这块一定要对准了,对吧,那当然咱们的程序还会报错,因为底下这块的结构咱们有些东西还没写呢。对吧,那咱们再看一下底下这个音铺的,音铺的是什么呢?看一下就是它。对吧,你可以新增属性值。对吧,那咱们看起来这。开这个EL input,那虽然说啊,它有一个类名叫做input new t,那这个咱们不需要管,因为人家是不是给咱自带样式。以及V杠、if。其实啊,这块的操作你们不应该没收。
18:00
咱当年写过写过谁写过EL input和SPA切换。对不对,就是谁显示谁隐藏嘛,对吧,那其实这块的也是一样,你看这儿啊,老师为什么说到它,你看这啊。你看人家已经写好了这个。这个你可以认为是死吧?这是不是input span input span input span input是不是进来来回切换,所以你会发现你可以认为这个input和这个EL button就是咱当年的span和input。对不,所以说他为什么要写V-if,就是到底是展示d input的还是到底展示。Button,它俩是不是进行切换?对不所这块呢,要注意一下子,所以这呢,老师呢,做一下笔记,就是说底下的结构哎结构哎结构哎结构。那么可以当做咱们。哎,当年的。
19:00
啊,当年的SPA与input的切换。对不,那当然咱们现在是没有这个值。咱们先给它折上来,咱们先把这个结构先给它折上来,这样好看一些,还有什么V-model收集啊,表单元素里边的内容。以及打了个ref。对吧,以及size,咱们说过EL input是可以设置size对吧,在前面咱们时也说过对吧,那以及你看这那这块呢,不就是input的本事件和enter事件。对不,所以这块的业务跟咱当年所写的几乎是如出一辙,对吧,那当然咱们目前而言只是。展示出去就行了,那咱们这些事件呢,可以先不写,等到咱们需要写的时候,回手再去处理。对吧,所以说老师呢,把这两个事件我给你注释上,以及老师呢,也把底下这块的结构呢,我也给你提上来。对吧,把他俩当做一个CP,什么叫CP呢?呃,你比如说CP就把他俩当做一对去看。
20:01
好吧,那以及这个这个这个叫new tag,咱们一会改一下名字。对吧,啊,这个new t咱们叫添加,因为人家已经写好,那是不是也叫添加,那咱们的也叫做添加。哎,天。添加对吧,那当然咱们的这个事件也给它去掉。啊,这个咱也给它放在这儿。对吧,那这块呢,要注意一件事,就把它当成SPA和音input切换就行了。但是这块呢,有一个问题,什么问题,看着啊V-if。We else,也就是说得有一个啥,得有一个标记去控制着到底谁显示,谁隐藏。对吧,那当然咱们目前而言是没有这个属性的。对不对,还记不记得咱当年说过,谁显示谁隐藏,谁显示谁隐藏,那将来有多个属性值呢,多个属性呢,你是不是有多个添加按钮,你看嘛。咱找一个有没有多个属性值的,这都是一个,看还有没有啊,这也是一个,咱们找一个。
21:02
手机。手机通讯。手机对吧,比如看它,你看它的销售属性,几个是两两个颜色,那这时候砖是不是就有两个button对吧,还有两个input input你得进行切换,谁显示谁隐藏,所以说咱们得有咱当年写的那个叫叫叫什么我也忘了,所以你得有什么呢?你得有相应的相呃属性去控制啊,到底谁显示谁隐藏。那咱们先随便找一个地儿。比如说啊,他将来的销售属性啊很多,那咱们让每一个自己的销售属性负责自己的这个button和input进行切换。对不,你不能放在date当中。咱们以前也说过,如果你放到data当中,相当于用一个字段控制着所有的销售属性当中,那个button和input切换是不行的,大家会同步,就是你全是button,那我全是button,你全是input,我全是input。对吧,这个咱以前说过,所以说让每一个销售属性去控制着当前自己的这个销售属性值,到底是音铺的还是谁,还是咱们的那个SPA,就是那个巴。
22:13
那当然咱们目前而言,咱们目前而言啊,这个销售属性,比如说这个颜色和版本是没有这个input的visible和什么input的value字段。对不,那所以说那现在啥是安底范,安底饭也是转化成false。对不?所以说咱们将来要注意一件事,什么事,老师呢,这块呢,是随便的写了两个肉,就是为了防止他不报错,因为你不写他一定会报错的。你不写他这没这个使性会报错的,所以说老师先随便找个地儿先给他放在这。对吧,找的地儿是谁?找的地儿是每一个销售属性对吧?负责自己当前的这个属性只是显示音input的还是谁啊,还是这个SPA。对吧,你就把这个八字当做SPA就行了,但老师还是那句话,你不能放在date当中,如果用一个属性控制了所有的小售属性,你可能会出现以前咱们看的那个效果,要么都是八,要么都是死板。
23:10
对吧,所以说呢,咱们呢,先给他就放在哪呢,放在咱们这个销售属性这进行控制就行了。啊,当然咱们现在还没有收集数据。对吧,那所以说咱们先看一下静态有没有出来。对吧,哎,静态是已经是有的了,当然是这些动态效果都是没有的。那以及操作这你看人家这操作是不是有个小按钮,那咱们先给它加上,就底下这儿。对吧,Lo。那它也是一样,也有相应的销售属性,肉和Dollar index。In DX,那以及这啊,那这块呢,咱们是有一个按钮的,那给它来一个EL杠,Button。它呢应该是删除,删除呢应该是红色,那就是DA这样,那以及它有icon icon的应该为EL杠,Icon杠,Delete,以及大小个头呢,咱让它小一点,为啥为mini。
24:08
对不,那咱们呢,回首呢,去看一下咱的那个啊,不看他看咱的。对吧,图书。电子书刊,电子书找你对吧,这是有,当然也是静态的,什么都没写的。那接下来呢,咱们呢,还要完成的一件事是什么呢?对于当前的这个电子书,这个PU自己有的销售属性是颜色,那还未选择的有几有两个。对不对,因为老师说过啊,咱们整个平台它拥有的销售水平就这仨,颜色尺码和版本,那么现在的这个武侠的这个po就是武侠。哎,武侠这个PU这个类,它现在拥有的销售属性是谁,是颜色。对不颜色,那未选择的销售属性还有几个,是不是还有两?
25:04
对吧,尺码和版本。那这个你得计算出来。老师,为什么说计算呢,你看啊,你得看数据。那整个平台所有的销售属性是几个,是三个,在哪儿,在这儿。在在咱因为咱们在拉取数据的时候已经拿到了,在哪就在这儿。老师带你们看一下子在哪呢,应该是在这。对吧,哎,咱们找一下对吧,获取平台全部的销售属性一共是三,而你当前的这个PU拥有的销售属性是几个是一个。对,不一个颜色,所以说你得通过这两个数组计算出什么,计算出还未选择的销售属性有几个。对不?所以说咱们去计算一下的,就是未选择的销售属性,还有几个应该这个好算,说老师这还用算吗?三减二不是三减一嘛,等于二对吧,但是你得写代码呀。
26:02
对吧,那所以说来。咱们呢,把该给它折起来的地方呢,给它折起来。咱们呢,来一个计算属性叫做compped computer。计算属性,那你要计算什么?是不是要计算出还未选择的销售属性?对吧,那咱先起个名字叫安。Select。SE select的销售属性,Co AR。对不,那当然计算属性你一定要有个返回值,那比如说咱们先来个二哈。对吧,那老师呢,先找一个地儿把这个数据呢,给他展示出来。叫安。Select at t啊SE at tr,你先看看是不是这有个二哈对吧?哎,这是没问题的对吧,但是咱们还没算呢。你得想明白怎么算。对吧,那咱先找一个电子书没问题啊,没问题,咱还没算。
27:03
咱们得算算算怎么算来。你看这。看这那首先说。整个平台的销售属性。整个。平台的销售属性一共三个。分别是颜色。先后顺序无所谓啊,尺寸。还有什么呀版本。对吧,那这个数据在哪呢?其实这个数据咱们已经获取到了。这个数据在哪?就是这个c a tr list销售属性的数据,括弧是项目的。全部的销售属性,因为你看咱获取数据的时候,咱也做标记了嘛,在这儿嘛,这不就是那个Co Co a list。对吧,那这个数据在哪?在这叫做c at tr at tr list。对不,那以及还有什么,还有就是当前PU拥有的属于自己的销售属性,那它在哪呢?是不是在在在在这个叫叫叫PU点。
28:15
叫啥来着?看呃叫PU,呃点PU CU at加list。对吧,在这个数组里面。对吧,那你说这怎么搞,怎么筛选出你就是还未选择的那两个,对于咱们当前举的这个例子,是不是还有两个未选择。那怎么选择,那对于他而言,他比如说有颜色,你怎么筛选出这个尺寸和版本。对,不,很简单,过滤,什么叫过滤呢?从已有的数组当中过滤出。还未选择的,呃,这个这个销售属性就行了。对吧,咱们应该学过future。过滤受阻的过滤。
29:00
对不,那所以说咱们可以怎么办,可以这么办,你看啊。this.c list.future。File filter,这个老师得说一下,这个呢是数组的过滤的方法。他可以干什么。可以从。已有的,哎,已有的数组当中。过滤出用户。需要的元素,需要的元素并且。返回一个新的数组。爱心的数。对不,那这里面呢,咱们就给它来来什么呢,来艾。那你这里要注意一件事,现在的这个item是谁,咱们打印一下,别自己搁那儿瞎想,胡想乱想,那这是不行的。对吧,那咱们呢,看一下子。这个呢在过滤,过滤什么呢?现在当然咱们没有写任何业务逻辑,只是为了打印出来你看啊。
30:04
走,你看现在这个item是什么。Item呢是每一个是整个平台当中的这三个销售属性,每一次呃便利的时候是不是都是相应的什么颜色版本跟尺寸。对不,那这个是所有的销售属性,你要干什么,你是不是要筛选出不是颜色,咱就拿当前这个案啊案例举例子,你是不是要筛选出不是颜色的这个元素,呃,其余那两个元素。对不,那怎么怎么怎么过滤,比如说A数组里面有仨元素,B数组里面有一个,我要筛选出A数组当中还未选择的尺寸的斑马,这玩意怎么。对不?那咱们应该知道,对于filter而言,它需要return的是不尔值,要么真,要么假,真代表的是不是需要的元素,那false代表的是不需要的元素。对不,那你这块可以怎么可以这么办,你看。这点PU。
31:01
点叫PU t list第二谁点。对不,那这个咱们叫ITEM1。那咱们应该知道你现在的这种结构,你可以当做啥,是不是当做两个for循环?那咱一点捋啊,Filter第一次执行的时候item是谁?Item,比如说咱这的。我给大家捣鼓顺序,这叫尺寸。哎,尺寸就比如说filter第一次过滤的时候,Item,谁item是尺寸。对不?完了,接下来它外层的直行完,里面的二瑞是不是也要执行。二位要干什么?我要拿着我的这个颜色看一下子是不是?它俩相等。那如果相等,代表是不是已有的?对不,那不相等代表是不是未选择的,是不是就要就行了。对不,所以这块怎么办,这块就很简单,你就写谁写。什么item的name?我是不是name是咱刚刚看了,如果不等于,不等于ITEM1的,ITEM1叫啥来着。
32:06
Item叫name是不是它的那个名字,还有一个应该叫做item的,我看这有没有数据啊,看一下数据。找一下po。对吧,找一下子应该是销售属性,应该叫做看一下子啊,销售属性应该叫做啥来的,应该叫做Co什么什么Co。对吧,如果不等于CL内。对吧,那代表什么,代表是我是真的需要这个未选择的这个这个销售属性。对吧。对吧,你看咱们捋捋啊,你看比如说你第一次future是谁。咱就按按照这个顺序,你看,就假如你比一下子第一次item是不是尺寸。那你拿着这个元素是不是要要看一下子艾瑞艾瑞干什么,是不是在便利这个数据。
33:00
这个数字里边就一个元素颜色你看。Item的name是谁?是尺寸,尺寸不等于啊ser name就是这个颜色,是不是真?那就说艾瑞会反这个这块老师得说一下,这块咱们得知道。EVRY是数组的方法。那么会返回,返回啥一个布尔值对吧,要么针。要么讲。假的,哎,假的。假的取决于它这块的结果。对吧,就是你看item的name,比如说尺寸,尺寸不等于啊,不等于颜色是不是针,那也就是说它返回的是一个针,那其实这个整体返回的结果就是就是针,那针代表啥?代表是不是这个数组过滤出来这个元素,咱们是不是要。对不?那第二轮比如说item是颜色对不?那艾瑞里面是不是这个这个这个这个数组里面是不是还是只有颜色,那它写的是颜色不等于颜色,那是不是甲,那甲是不是就不要了。
34:07
对吧?以此类推,但是你别忘记了,对于计算属性,它必须得有一个返回值,那返回的是什么?那返回的不就是你计算完的这个数组吗?对不,或者有同学可能这么写,这个有点多,你看,但是你得知道,你看老师这么写,那也是一样,对吧,Light,一个result。这个result是你过滤完之后那个数组。而你要注意一件事,什么事?对于计算属性,你务必要有一个返回值,那返回的即为谁,返回的即为造。对吧,所以咱们就筛选完了,其实这块考验的就是你对于数组的一个呃方法的一个灵活的使用。咱们可以看一下对不对。对吧。你看啊,走。咱们呢,去瞄一眼啊,现在已有的是颜色,那你看未选择了,那明显,哎这块是不是有有有有啊,2E写错单词了,EV2位。
35:03
对不,哎,少了个单词对吧,记住少个单词,送你俩字凉凉了啊,这块要注意,咱们测试一下看对不对。对吧,啊走。走来瞄一眼啊,你看现在已有的是颜色,那没有的时候版本跟尺码。对不,这是明显是OK的了,那所以说咱们就可以把咱们这个select下拉框这块给他搞定了。对不对,对吧,那咱们去用一下咱们的,把咱们这个下拉框这给它搞定哪呢?咱们找一下子应该是table的顶上。是不是就这。你看这样。他这个place holder,咱写的永远是还有三位选择,那这回咱们得改了,改成动态的。对吧,那还有什么,是不是还有未选择的销售属性的个数啊,所以这块应该写谁写咱们的那个叫做安。Select a sal at tr的啥,Lengths,因为它反应是一个数组啊,Lengths的个数,那咱们看一下是不是二。
36:01
对不,那以及把咱们底下这。叠着这个,呃。Input,不是,呃,Option,你是不是得放?那这块呢,你得写V-for,那你便利咱起个名吧,那这个叫啥呢?叫UN select。对不,那逗号in desk,你遍利的是谁?遍的什么an select c点对吧?那当然咱们得写KK,为什么呢?就是按select.id因为我刚刚看到那个数据是有ID的。对不?那当然,你展示的数据应该是谁?应该是咱们的select name。An select.name说老师你咋知道是name?你看数据吗?看这,这不有ID和name。对吧,那以及收集的数据应该是谁呢?应该是咱们的这个ID。对,不就是安。select.id那收集到哪呢?咱们一会儿再说,先看能不能展示出来。
37:00
对吧,图书。电子书刊。电子书对不走没毛病。对吧,哎,没毛病。但是你要注意啊,你将来得收集数据,那你数据收集到哪。对不,你看咱咱将来这个Li要收集数据,你把数据收集到哪,就未选择说老师是不是收集到po这里啊。啊SPU里面这边的结构吧,有点多。其实你可以随便找个地儿,因为最终你只要能把这个数据收集到将来发请求之前,你把数据一整理成服务器想要的样子就行了。对吧,所以说咱们也去收集一下数据,那这块呢,咱微感冒的。对吧?V-model收集的是什么?收集在哪?咱比如叫ad tr销售属性的ID吧。随便找一个地儿。对吧,叫at t RA。对不,那这块老师一下写一下这玩意这块是啥是收集未选择的。未选择的这个不应该是这个位,应该是这个位对吧?哎,未选择的销售属性的ID。
38:05
销售属性的ID,其实你收集在哪都可以,你只需要做一件事,只要数据都有了,你最终向服务器发请求之前整理好就行了。但你得记住你收集到哪。对不?其实你收集到哪都无所谓,你将来只需要做一件事,什么事,在发请求之前把数据整理成人家需要那个格式就行了,但是你得收集。那所以说咱们测试一下OK。对吧,来测试一下走。走。哎,再来一个电子书看这。比如说现在老师未选择的谁是版本,看下版本的ID有没有收集到,应该是收集到,应该是po放叫ad对吧,没问题。以及还有一个小细活,咱们也做了,你看啊。如果这个下拉框没有选择任何的东西,你看啊,他这块呢,你看如果选择了未选择那个销售属性是不是可以使用,那如果说你没选择。
39:03
你没选择那个按钮是不能用的。对不?所以说咱们把旁边那个按钮的可操作性也给它完成,对吧,其实这个简单就是它旁边这个button取决于什么,取决于它有没有ID,有ID代表啥,代表你选中了,没ID代表你未选中。对不跟他正好是相反的嘛,所以来一个叫做低斯。Able的,我看一下子你的at t RA有没有?对吧,你看吧,假如说它初始是谁,初始值是空,空串,空串是不是false。For代表是可以使用,所以你加个C。那如果说你选中了,比如说是666,那666也是转化成正针针加个非是不是就false就可以使用对吧,所以说这要取反就行了。所以咱们看一下咱们的这个啊,你看。图书电子书刊电子书,咱们来一个啊,你看比如说现在默认值是谁,默认值ad是空串,空串加C是不是真真不能用,但是如果你选择有值加C变for是不是就可以使用。
40:06
所以说咱们也把咱们的相应的销售属性,这里的静态。数据的展示已经完成。
我来说两句