00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成销售属性值的展示与收集的业务。那咱们呢,先看一下的已经完成的这个项目。比如说老师选择一个图书。电子书刊电子书,那么咱们目前呢,是正在开发修改PU的这个业务。那么对于PU的名称、品牌,PU的描述以及PU的图片以经完成了数据的展示以以及数据的收集。那么咱们呢,看一下的销售属性这里。那么咱们目前而言啊,已经完成了,比如说用户选择一个未哎未有的一个销售属性,那么当你点击添加销售属性。的按钮的时候。那么会发现呢,底下呢,会新增一个销售属性。
01:01
那对于新的销售属性而言啊,它可以添加新的属性值。那这里呢,是有一个按钮的叫添加。那么当你点击按钮的时候啊,会切换为一个input。其实这块的业务逻辑啊,和咱们当年的span和input的很像。跟咱们前面的模块当中,你看看跟SPA input切换,这不就是很像的业务逻辑吗。那咱们呢,可以添加新的属性值。比如说版本,比如说一版本对不,你也可以添加其他新的属性值,比如说二版本对不,以及三版。那么回首呢,再看一下咱们正在开发的这个项目。对吧,那老师呢,也选择图书。电子书刊电子书对吧,修改的。那你看咱们这块的业务逻辑啊,那首先说现在咱们点叉子是删不掉的。
02:03
对不点这是删不掉的。那以及啊,点击添加按钮,这都是白扯,因为没有写任何的业务逻辑,对不?咱们这块的业务呢,只是把它展示出来。那咱们目前而言啊,是您可以添加一个新的销售属性,对不但是属性值列表这一块都是静态的展示,对吧,业务什么的还没有写呢。对吧。那咱们呢,就去完成销售属性值的操作。那咱们呢,去看一下咱们的对应的组件。他们应该是哪呢?应该是table的第三列。哪块的结构呢,咱们呢可以看一下。应该是table的第三列,那不就是这个位置吗?对吧,老师呢,把这块呢给到和上。这块呢,就是咱的属性值名称列表第三列。那咱们看一下分别有什么,有EL高tag。
03:04
那么EL-T它显示的是什么呢?其实显示的是咱们的,你看这是咱们的已有的销售的属性值。对不,那么底下这块有一个EL input和EL but,其实这块就很像咱当年的SPA和谁和input。对不对。它相当于input,它相当于谁相当于呃,Spam进行切换。对不,那咱们呢,先一个一个看啊,先看这。那首先说啊,这块呢,有一个作用与插槽。Lo-SC,那你要注意这个肉是谁?对不,这个肉呢,应该是这一排排应该是个啥,应该是一个销售属性。对吧,不是属性值,是一个销售属性。对不?对吧,那咱们看一下的EL tag是干什么的呢?你看啊,EL tag其实它是展示已有的销售属性的属性值。
04:07
咱们可以看一下你看啊。虽然说EL-tag we-for tag in in谁in肉的PU t value。那这不就是所有的销售属性值的那个数组吗?对,不做肉是什么?肉是销售属性。这是什么?这是销售属性值的那个数组。数据是哪,咱们呢,还是得看数据。对不,那咱们呢,去找一下咱们相应的数据,你去看一下。对吧,应该是PU否。你看啊。应该是PU。PU当中呢,有个叫做PU CU tr list。这是什么?这是两个销售属性,对不,一个是颜色,一个是版本,您可以看一下。对不颜色这个呢是版本。
05:03
对不?而咱们的EL-tag展示的是什么?展示的是销售属性的属性值列表。对不,你看就比如说颜色。颜色对应底下的是它的属性值列表几个元素,两个分别是一。和谁和二?这肉点它那是啥?那不就是属性值的那个数组吗。在这是不是进行展示。对吧,所以说要明白一件事,什么事,EL-tag是干什么的,是展示属性值列表的数据的。对不,所以说EL-tag是用于啊,用于展示已有的属性值列表的数据。对不?那这块呢,写的是啥,是不是属性值的ID。对不以及啊,关闭的这个小操作啊,关闭对不?哎,这个数据咱们再切换一下,是不是有个小关闭的这样一个小按钮。
06:06
对不啊,当然事件咱们还没写呢,以及是否有没有那个过渡动画。对不?你看人家已经写好,这个是有过渡动画。对吧,哎,但是咱们这个是静态的啊,这块要注意。回来再看啊,你看这是干啥?这是一个EL input,你会发现当你点击添加这个按钮的时候,它是不会变为变为什么变为一个input。对不,你看嘛,当你点击这个按钮的时候,会显示音谱的。当你INPUT1本乐的时候,又显示这个,But,这不就是咱当年的span和input。对不,所以说先把这块的结构先给他看懂。那咱们呢,一点点来去完成咱们的业务逻辑。看这。那老师呢,选择一个图书电子书刊电子书来看这老师呢,把它呢给它挪下来,你看这。
07:03
比如说啊老师给他添加一个新的销售属性。那新的销售属性呢,一定是有新的啥新的属性值。对不,比如版本有一版本二版本三版本四版本六版。这些都是属于它的属性值。那将来这些数据是要收集以及展示的,而且最终要提交给服务器告诉他。我新增了一个销售属性,值为多少?对不?那咱们要注意一件事,版本是新增的一个销售属性。对不,那么当你点击添加按钮的时候。对不,而且呢,咱们这块呢,应该还有个小小细活,咱们看一下,咱也给他做了,你看啊。你看啊。你要看一个小细活,哪儿就是这儿。你看当老师选中版本,点击添加新增一个销售属性的时候,这块应该是为啥没空的。
08:00
对不,所以咱们找一下咱们的代码老师呢,找一下咱们那个回调。就是点击添加销售属性那个按钮的地方,咱们找一下。看看有没有写。对吧,是不是在这儿呢。对不,你不仅仅说要往数组里面铺一个新的销售属性,你应该把这个值给它清了。谁是不是就是咱顶上的这个a TD and AR name,对不,就是清空数据,哎,清空数据要不感觉怪怪的,对不,这点叫做CU好叫啥来叫at tr。ID and name的质控。对吧,这回呢,咱们一点点调试去看一下O不OK。对吧,图书电子书看电子书走。对吧,来选择一个版本走没问题吧啊。那接下来咱们呢,完成的是销售属性值的添加。那这块呢,要注意,当你点击添加按钮的时候,你应该展示的是谁,展示的是input。
09:06
对不对,这不就是咱当年的死绊和音input?所以说你得有一个字段去控制着到底是谁显示,谁隐藏。对不,那所以说咱们呢,看一下吧,那咱们这块的结构是怎么做的,看这。虽然说EL input有一个类名,那当然有的相应的钥匙。V杠一。老师做了一件事。你看它这块的input和button,他俩用的是V-if与V-else,也就是说它两者水火不容,只能显示一个。那么控制的显示与隐藏,你看当时老师写的是写在哪,是不是写在肉肉是谁,是销售属性的身上。但你要注意销售属性的身上有这个input visible这个属性吗?没有呀。对不,所以说咱们要通过这个字段去控制的,到底是显示音部的还是显示八。
10:02
而且这块还要注意一件事,什么事。那么老师为什么要把控制着input和button的这个,呃,他俩谁显示谁隐藏的这个属性放在销售属性的身上呢?你要明白。咱们的销售属性,您可以添加多个。那么每一个销售属性值当中是不是都有这个添加的按钮?对不对,这都有添加的按钮,那是不是都可以进行input和button切换。所以说你不能盲目的直接写在date当中,如果写在date当中,你相当于用一个信号量控制着这仨。又会出现咱当年那种情况,什么情况?要么大家都是button,要么都是input。所以说到底谁是input,谁是button,我怎么去控制它,谁显示,谁隐藏呢?就是让每一个销售属性。都有属于自己的一个属性去控制着button和input的切换。
11:02
相当于将来有三个属性控制着这三个按钮和那三个音谱的,谁显示谁隐藏。这有老师为什么放在这块的原因。对不,这块一定要想通。而且要注意当前的销售属性,有这个input visible这个属性了,是没有。对不对,这块要注意。那这就为什么咱们默认展示的是谁,展示的是添加按钮是button,为啥?因为他没有咱们销售属性是没有这个属性的,得到的值是按底范是for走,后者是不是有有八。对不,以及VGA model,那么将来如果出现了音input,那你要把数据收集到那儿。那么老师做的是怎么做的?我是把所有的input的数据收集到当前销售属性的身上的。对不啊,所以这块要看懂,当然销售属性身上也没有这个资格。
12:01
咱们可以看一下的,看一下咱们的数据。你看啊,老师呢,把数据呢,给你打开找到咱们的,这叫做SQ放。现在对于咱们的销售属性的身上是没有这两个字段的。什么什么input的微字博和input的V6Y6是没有的。对不,这块要注意。那咱们呢,老师给他刷新一下,咱们呢一点点去给他完成。那咱一点点来。你看比如说修改它老师添加一个新的销售属性,比如说版本,那咱一点点来,那首先说当你点击这个按钮的时候。那你应该由button变为input。对不对。那也就是说,当你点击这个按钮的时候。那咱给他来个点点击事件吧,叫艾click。对不,那这个按钮叫做ADD叫添加属性值,销售属性值叫。At tr value。
13:01
对不当你一点击它的时候,来看这儿。老师呢,在这儿呢,当然你得写他的回调了,你没有他的回调是不行的。对不,那这个老师呢,把没用的先给它折上。这块呢,咱给他来一个这是什么,这是添加。按钮的回调。那你看,当你点击添加按钮的时候,你要干什么呀。你看啊,当你点击添加按钮的时候,你要干什么呀。对吧,比如说咱来一个吧。对不?你要干什么?你是不是要显示为input?那么input与button的切换到底谁显示,谁隐藏?是不是通过销售属性的这个input visible这个属性控制?对不,那所以说那咱们呢,你需要把肉串进来,肉是什么,肉是你当前点击的。这一行的这个销售属性。对不,那你看咱们可以拿过来老师给你搞一下子,就是说当你点击销售属性。
14:05
值,哎,属性值当中的。添加按钮的时候,那么需要展示,展示为什么是input?就是展示需要由button。变为什么?是不是变为input?那么通过什么控制的,是不是通过?哎,通过当前销售属性的哪个字段是不是叫做input的VI,这个字段是不是进行控制。对不哎,咱给他拿过来找到咱这儿对吧,属性的它的这个字段控制。但是你要注意一件事,当前的这个销售属性是没有这个字段。对不?你看老师给他来个肉。咱们呢,打印一下来一点点测试这块可不能着急。走走,你看现在老师点击的是谁,你看这啊,你看这。
15:02
老师给他打印出来清空走,你看。当老师点击添加按钮的时候,你看他是谁?它是当前的这个销售属性版本。对,不是一个对象,它的属性值现在是空的,一个都没有,而他的身上是没有谁是没有这个音input的visible。这个字段。那所以说有的同学可能会说,老师我知道一点击应该展示谁应该展示音谱的,那你把他的这个字段变为触不就是真,真不就是展示呢。对不?那咱们先看一下子啊,你看啊,那现在如果老师要这么做,就是肉打点音铺的就是它。叫做input visible,哎,你看老师要这么搞行不行?肉点它等于真,你看它能切换为谁吗?能切换为input。对不刷新老师呢,咱们呢,再看一下你看啊他能吗。
16:00
你看啊,老师给他添加一个走走,你看能不不能。但是你看一下呢,当老师点击这个添加按钮的时候,有没有给咱们的当前的销售属性。对吧,加上这个字段找一下。应该是咱们的第几个呢,应该是第销售属性应该是PU下的。呃,这下的第二对不,你看他身上有没有这个字段,有,但是你会发现它为什么不好使。因为它不是响应式数据。对不?所以说怎么办呢?你可以这么办,咱当年学过,叫做this Dollar side。对不谁要加哪个项是属性对不值,为什么?对吧。那咱们呢,可以看一下子找你刷新,咱们再看一下,你看能不能切换。对不?那咱们呢,看一下子,比如版本添加走能不能起是完全可以。
17:00
对不,那接下来你就可以收集咱们的input的数据了。而input的数据咱们也没有数据双向绑定,有。绑定到哪了,咱们收集了啊,你看这真收集了。咱们把数据收集到哪,是收集到收集到当前的销售属性的input value这个字段上。但是你要注意一件事。咱们销售属性有这个字段吗?没有你怎么收集啊。对不,那所以说你这儿还要做一件事,什么事就让老师写一下子。对吧,就是挂载在销售属性身上的哎身上的哎身上的响应式数据,它控制着button与音input的切换。对不,哎,控制button。与input的切换。对吧,那你还要注意一件事,那如果说展示input的,你是不是要收集它的新增的销售的属性值。
18:01
对不,你收集到了,你收集到的是销售属性的这个音铺的Y6这个字段上,但是没有。那怎么办?很简单,再添加一个呗。对不就是通过响应式,哎想。应是数据叫input in input的value字段。那么收集新增的。销售属性值,对不?那就是这点Dollar side。谁,那是不是应该是肉当前的销售属性添加哪个字段?你看了,那应该叫input value。那么初始值应该什么?初始值应该是一个空号。对,不,新增的值是需要用户手动的收集的填写收集的。对不,那咱们测试一下子看这走。新增一个版本添加,那你看啊,咱们呢,还是盯住数据,数据说明一切看这啊。看这对吧,那咱们呢,应该是看PU当中的销售属性,这第几个,第二你看。
19:07
看这顶住了啊。版本,当老师点击添加的时候,你会发现咱们给当前的这个版本的销售属性添加了两个字段,一个叫input visible为true,是不是展示它以及收集了新增的属性值的数据。对不对,对吧,是不是也收集到了,只不过咱们把数据收集到了,收集到了当前的销售属性的身上。对不?那么要注意,当你一本乐的时候,你要干什么?那么当你一本乐的时候,你要把收集到的新增的销售属性值扔到这个销售属性值的一个数组里面。但是你要注意,当你一本乐的时候,是不是应该又展示谁又展示八的?对不,所以说找到咱们的音谱找到它。那他呢,应该是有本乐时间,那咱们呢,给他拿过来,这是咱当年,哎,他写了,咱是不是带走了。
20:07
对不,那咱们呢,给他拿过来CTRLC。找到咱们的底下这再来一个。这个呢是EL杠。Input失去焦点的事件对吧,是不是就要它?你看,那你要干什么,你得明白,咱先来个alert个123。你看。走,老师给他刷新。图书电子书刊电子书修改。对吧,这块就是要大量的测试,你看走当老师输入的时候。你是不是把这个数据收集到了当前的销售属性的身上?那当你一本乐的时候,你应该有。Put变为谁?变为button?而这个控制数据是由谁控制的?是由当前的销售属性控制。
21:02
对不?咱们可以看一下是由当前的销售属性的这个音铺的微字博控制,那你应该把它变为啥,变为false。那所以说当你一本了的时候,要不要传肉要。对,不肉。那咱们在底下这儿,你就得接受。对不,因为那个字段已经是详式了,你只需要修改咱们的那个,呃,修改这个字段。修改这个字段的值为false即可。啊,它的值为false。那不就显示谁显示八字。但是你不需要再写到side了,因为它已经是显示数字了。所以说你看肉点阴。Put visible in put v啊,其实就是它。对不?把它的值变为什么变为false?对吧,I变为false。那咱们呢,可以看一下O不OK,一点点测试。
22:02
看咱的啊。来。走你看,比如说老师给他新增个版本。对不来个什么一版本走。没问题吧,哎,没问题吧,但是有的同学可能会说,老师那为什么没有用EL tag进行啥进行展示啊。对不对。对吧,那你要注意一件事什么事啊,咱们现在新增的这个销售属性。的属性值,它的数组现在还是什么,还是空的。你看吧,看数据。这是人家已有的销售属性,颜色属性值是什么,是不是它?对不,哎,是不是它颜一和二。而咱们的新增的销售的属性值已经收集到了,但是这个数组数组里面的属性值的个数是零个。对不,那所以说当你一本乐的时候,你要干什么。那你是不是要把收集到的新增的属性值,是不是扔到这个数组里边进行展示?
23:04
对不,那新增的这个属性值得收集成什么模样呢?收集成人家的这个样子。需要有两个字段,一个是base Co ID。那这里呢,老师呢,做一下笔记。写下,比如说新增的,哎,新。增的。销售属性值需要收集的字段有两个,而且是以对象的形式。一个是它。销售属性的ID,一个是销售属性值的名称。对不,这两个字段是需要收集。这块要注意。那所以说当你一本乐的时候,你应该往当前的这个销售属性里面。对吧,哎,老师给你折上,应该往当前的销售属性里面。添加新的属性值对吧,就是一本烂的时候。
24:02
所以本的时候,你不仅仅说只是把它变为button,你还要咋的,还要往那个数组里面。新增新的属性值。对吧,那所以说咱们得解构出,哎,解构出什么呀,解构出销售属性当中收集的数据。咱们呢,打印一下点log肉。对不,那咱们呢,可以瞄一眼啊,可以看这。图书、电子书。对吧,来看这儿。老师给他新增一个版本你看啊,老师一本乐的时候123走你看啊。那首先说base Co AR ID是什么?是销售属性的ID?音input的Y流是什么?是属性值,新增的属性值。Input visible是不是控制的button与EL input的那个切换的那个字段。对不,这个是啥,是销售属性。
25:01
那以及咱们现在的销售属性值,这个数组是空的,就是说当你一本了的时候,你应该往这个数组新增新的销售属性值。对不?那你需要两个字段,哪两个字段,Base sal RA和input value。那所以说咱们的解构出来,从这个肉当中解构出来。找你,那cost应该等于什么?等于咱们的base?一个叫做base sell base。SADAD。对吧,还有一个就是咱们新增的销售属性的属性值input value在这儿呢。对不?那么你需要把它整理为服务器需要的那样那样的形式。对不,那这是什么?这就是新增的销售属性值了。那咱light一个啥叫new cell at tr value,它应该是个对象,而这些字段并不是说老师莫名其妙说的,是文档当中。
26:04
需要你传递的。对不,那分别是谁?KV一致省略微。对,不一个是他。对不,这个字段咱们是需要收集。另外一个叫做Co tr value name叫做销售属性值的名称,那为什么不就是为input的value?那你需要干什么?是不是扔到咱们的这个数组里面?应该是肉点汤对不,所以说来。新增。那应该是肉点,哎,肉点保存一下。对不?哎,又没有提示了,真烦人,应该是肉点他。对不,哎,肉。点汤,哎,点汤。对吧,它是个数组push push谁push咱们的new。没提示好,好难受啊,咱们呢,给它关了再给他弄进来。应该是push,叫new feel。
27:03
哎,有AR value。对不,那咱们呢,测试一下O不OK。对不刷新。给他关掉。图书电子书刊电子书修改。对吧,比如说新增一个版本没问题走。比如说来个什么叫一版本N没问题吧,二版本没问题吧,那你还能来一版本。对不,其实这块剩下的套路都是一样的。那咱当年说过,你新的属性值能是空的吗?不能,以及也不能重复。对不,那所以说咱们把这块呢给它完成,也就是说当你由input变为button的时候。就是当你一本乐,你看当你一本乐的时候,就是由input变为button的时候,你不仅要展示展示,很简单,这就完事了。但是你要明白,你新增的销售属性值是有说到的。你得判断。
28:00
对不,第一个新增的什么啊,就是新增的销售属性值的名称。不能为空。对不,这咱曾经做过,就是说如果你的input的value。对吧,等等于空窗。对吧,啊1.tri。点T。M,对,不等等于空串,那你应该给个提示,就是this.dollar message meage message,对不,你就写什么属性值不能为空。底下代码不能执行了,那你是不是就得了。对不,那咱们可以看一下子,你看啊,这是咱当年做过的业务。这可别忘了,你看吧。对不对。对不对,哎,但是没有提示是吧,那咱们看一下是不是单词写错了,应该是message啊,点message啊。Mes,对不?那咱们呢,回手再测试一下。
29:04
这块一定要,就是多加测试。对不走,看这。那以及属性值是咋的,不能重复的。对,不比,就说你这个input的value不应该出现在这个数语当中。对不对,对吧,不能重复,所以这是一种情况,还有一种情况是什么,看这。就是属性值不能重复。那这块怎么整啊。这块怎么整?啊,有没有重复,其实可以用咱们的A对不?比如肉点谁肉点它。所有的销售属性值的那个数组,第2EVERY EV e r对吧,Item我看什么呢?我看他的item,我看这个名字咱不能瞎整是吧。咱们看那个值叫啥啊。它应该叫做item的什么,看一下子。
30:01
看一下数据。走走,找一下咱们的po。是这。呃,应该是这对吧,看一下子销售属性值的名称应该叫做。呃,叫做Co a tr value name,这玩意不能重复,因为现在已有的是一和二。对不,也就是说I特点它。对吧,如果不等于,不等于谁input a value。对吧,那么如果不等。那是什么意思?就比如你心中的是三。那三不等于一不等于二是不是真,那代表是我没有重复,那如果等呢。如果呃,咱就判断不等吧,对不?那咱们呢,可以测试一下子,你看咱们应该知道every返回的是一个啥,是一个布尔值,咱们比如说就叫做造,你看你看他反问这个值,你就知道怎么回事了。
31:00
Love。对吧,那咱们看一下子,你看老师呢,给你搞一下子。你看这样。走,现在已有一和二老师,再来个一。对不啊?Result的单词写错了,Ret,对不?咱们看一下这啊,走老师给他取消一下刷新。啊,这块给他清了看这。举个例子,又一和二老师再来个一。是不是重复了,重复了返回的是啥?返回是false。对吧,那么没重复呢。我看一下这是啥,这是重复的,重复的应该是,应该是啥的,应该是,呃,看一下啊。嗯。呃,咱们看一下啊,那首先说一是重复的是false,那没重复的呢。哦,是真。对吧,其实这块的吧,有点恰巧有点相反了是吧,那这样的也行,对吧,有重复的是false,那没重复的是真。
32:02
对吧,那所以说咱们这儿可以判断,如果重复了一定要记住啊,重复了的是什么,再说一遍。啊,其实这块用some也行,你要重复的,没重复的返回的是真。对不对,哎,老师给他取消一下,你再看一下子没重复的三。诶,为什么没有打印,看一下子四三,哎,等会咱打印一下,是不是打印中了。啊,对,打印住了啊,你看这cons.log result。对吧,这块呢,你要稍微记一下,其实这块用some更合理一些啊,但是咱已经用every,那就用every吧,好吧,咱们看一下啊,你看啊。现在是一和二,老是来个三,这是不是没重复,没重复是不是真。对不对,那如果重复了是不是false。对吧,那所以说这块呢,要注意重没重复是真。OK吧,重复的是false,所以这块你得判断怎么判断,比如说如果result。
33:05
对吧,如果加个非。对不那啥意思啊。啥意思啊,其实这块正好相反了,对吧?啊,如果加个非就让它不执行了就行了,对吧,咱们看一下子吧,你看啥意思啊。来看这儿。老师呢,把这个值呢,我给你打印出来console.lo对吧,你就记住,如果感觉自己理解不过来,你就给他打印这玩意有啥难的对吧,咱们看一下子走。走。走,你看啊,老师现在来个谁呢?来一个一。对不?对不对?一你要注意一有没有有已经有了,对不对,已经有了,它返回的布尔值是啥?你看一下返回布尔值是不是false。那false加非是真真是不是遇见?如他是不是不执行?对吧,那如果是三没有重复吧,那三返回的是真。
34:01
对不?那真加非false没有遇见,是不是该执行还执行?对吧,其实这块的呢,你可以用谁也可以用上毛,就是这里啊这里。哎,也可以用,谁用sum都可以。对吧,所以这块的套路跟咱当年是一模一样。对吧,所以说这块呢,要给他理解了,那么老师呢,最后再解释一下,这块有几件事要注意,第一个控制着这个button和input的切换是放在了哪。是放在了咱们当前销售属性这里,为什么呢?因为销售属性可以有多个,那有多个button和多个input,你不能放在date当中,用一个属性去控制。如果在这当中一个属性控制,你会发现要么大家都是八,要么都是音符,这个套路在以前说过,所以说有几个销售属性,就有几个字段去控制着他俩。对不,谁显示谁隐藏。对吧,所以这块要注意一下。
我来说两句