031-尚硅谷-后台管理系统-查看模式与编辑模式注意事项

哈喽，各位小伙伴们大家好，那接下来啊，咱们呢，去说一下子查看模式与编辑模式的一些注意事项。那咱们呢，去看一下呢，咱们正在开发的这个项目。比如说啊老师呢，选择手机，手机通讯以及手机。那比如说啊，我要添加一个属性，比如说颜色。那这是没问题的。那咱们要给这个相应的属性啊，添加相应的属性值。那这里呢，要注意一件事，那当你点击添加属性值这个按钮的时候，在table当中这块会出现什么？是不是会出现表单元素音input？那这里呢，要注意一件事，那如果说由用户输入的地方啊，一定是有幺蛾子的，所以说呢，咱们要判断。那比如说啊，你输入的属性值是黄色，那这没问题。对吧，你黄色是可以作为颜色的，这个属性的属性值，那如果用户输入进来的属性值，它是一堆空格呢。

对不那么这种情况对吧，你不应该作为相应的这个颜色的属性值对吧，而且你也没办法进行切换了。那所以说要注意一件事什么事，那对于用户输入属性值的时候，这块要注意，那当用户输入的属性值一波乐失去焦点的时候，那么这个属性值不应该是空的字符串，对吧？那这块呢要注意。那所以说咱们呢，要把这种情况呢，给他解决一下，那咱们呢，去看一下咱们的代码。那首先说啊，那这里面呢，是咱们的那个音input，那比如说用户在这里进行输入空格空格空格，当你一本乐的时候啊，要注意一乐的时候会触发to look。这个回调，而你传的这个肉是什么呢？那咱们呢，可以看一下这个肉是什么。

对吧，肉，那咱们呢，打印一下子这个肉。那咱们呢，重新呢，跑一下子看一眼这个肉它是什么。对吧，其实肉是什么肉，就是你当前添加的这个相应的哎，属性值对吧，那咱们呢，打开咱们的控制台，比如说老师来一个黄色，当你一本乐的时候。那咱们呢，去看一下这个数据，你看这个肉是谁。对吧，Atra对吧，Flag value value name，那不就是这个黄色吗。所以说肉是什么，那咱们呢也做一下笔记，那就说肉肉呢这个行餐。哎，就说这个行参。是。当前用户添加的最新的啥呀，是不是最新的属性值。对吧？而咱们在这里面呢，写了一行代码叫肉点flag等于false，那这块呢，咱们要注意这块的作用是什么，是不是由由咱们的编辑模式，对吧？那如果它为false，那就是走V，呃，V-else，那不就显示SPA吗？

对吧，那所以说这行代码的作用是什么？哎是让咱们当前的编辑模式，哎变为什么变为咱们的查看模式。那说白了就做了一件事，什么事让input怎么的，是不是消失而显示咱们的SPA？那这块呢，要注意一件事，那么当用户咱们呢，还是得多测试。那也就是说当用户啊，有编辑模式。截一下哎，颜色找你来一个对吧，那也就是说当用户啊，由编辑模式切换为查看模式的时候，要注意这个属性值不能为空的字符串。那所以说啊，咱们呢，可以判断，那这块呢，咱们写一下子。

那也就是说如果呀，哎，如果属性值为空，那么不能作为新的属性值，那么需要给用户提示让他呀，怎么的，让他输入一个其他的属性值。那所以说咱们这里面就可以判断，比如说如果你用户新增的这个属性的名字叫value name。点什么呀，点tri，那如果等等于空，那你不应该再执行底下代码了。对不，也就是说你不应该变，为什么不应该变为查看模式，所以说呢，咱们呢，给他写一个即可。对吧，那以及咱们呢，再给他一些提示，比如说this.dollar message meage，咱们呢，给他一个提示信息，对吧，比如说请你输入一个，呃，咱们就叫做正常吧，哎，正常的属性值。

那咱们呢，先把这种情况呢去看一下O不OK对吧，手机。手机通讯。手机添加一个属性值，比如说颜色，那咱来一个对吧，比如空格，空格空格一。对不请你输入一个正常的属性值对吧，那比如说咱们来一个黄色，那这是没问题的。所以说这种情况呢，要考虑到以及也要给他解决掉。对吧，那以及啊，其实呢，还有其他的问题。比如说你输入的属性的属性值，比如说啊，咱先来一个黄色，那咱再来一个，来一个呢，比如说咱来一个粉色，这都没问题。对不，那假如说老师再添加一个属性值，那如果也是黄色呢。对不，那如果也是黄色怎么办？你不应该再添加了。对吧，也就是说这个属性的属性值已经有过一次了，你不应该再出现一个黄色。

对不，那所以说咱们呢，还需要把这种情况也给他搞定。对吧，那咱们写一下吧，什么意思，比如说新增的，哎，新增的属性值，哎，属性值不能与。已有的，哎，已有的属性值怎么的，是不是重复。对不，那么新增的属性值咱们知道在哪，是不是在肉这。这是新增的对吧，那已有的属性值在哪呢？那咱们看一下，其实咱们已经有了，你看啊。手机。手机通讯手机，比如说添加一个颜色。咱们呢，还是得看住盯住数据啊，找到咱们的这个组件，一定要盯住数据。对吧，其实在哪呢？已有的属性值其实在a tr info的这个a tr value list里面，比如新增一个，咱们来一个叫做黄色。对吧，那你看这不就是新增了一个黄色的一个属性值嘛，对吧，比如说咱们再来再来一个红色。

对不，那你看是不是又多了一个相应的属性值。对吧，那这块呢，要注意一件事，那假如说当咱们一点击添加属性值的时候，其实它的数组里面已经多了一个元素。对不？那比如说咱们这回要写的是什么，写的是黄色，那你这回呢，一定要注意，比如说用户输入进来的这个最新的这个属性值，不应该跟前面这两个某一个重复。对不对，对吧，那所以说咱们得判断，但是该如何判断。对不，那这块呢，一定要注意肉是什么，肉是用户输入进来的最新的这个属性值，而所有的属性值在哪呢？在这个a tr info的这个at tr value list的这个数组里。那所以说咱们呢，得去判断怎么判断。

很简单。face.at tr info点叫at tr value list。对吧，那咱们可以用哪个方法呢？用some这个方法。那这块呢，一定要注意啊，face.a tr info.a tr value list是什么？是咱们整个所有的属性值的那个数组。对不，这块呢，老师呢，还是带着你们再看一下，对吧，比如说咱们来一个颜色。对不来个什么色呢？来一个粉色少女的颜色。对吧，少女少女梦对吧？啊，当然咱们这块呢在判断，所以说呢，咱们在这儿呢，先给他注释上，先给他注释。老师呢，还是要把这个数据跟你们说道说道，别一会儿判断的时候发懵。对吧，那咱们呢，搞一个比如说颜色。对吧，那咱给他来一个什么色呢，黄色。对不？那咱们一定要记住at tr info下的这个at tr value list是什么？是咱们所有新增的相应的属性值，对吧？比如说粉色。

对吧，那这也是没问题的，那么当你一点击添加属性值的时候，那咱们不是往这个数组又push了一个新的属性值吗。对吧，只不过名字是空。对吧，那比如说咱们再来一个黄色，那你要判断的是什么？判断的是最新的这个属性值不应该与前面这个零和一应该重复，不应该重复。对不，所以这块怎么判断呢，很简单。咱们用some遍历这个数组，就比如说现在这个数组应该有几个元素，就咱们刚刚这个操作。对吧，老师呢，还是多调试一下数据。对吧，颜色。来一个比如说黄色。对吧，比如说咱们再来一个吧，呃，粉色啊，代码没写完，他可能会报错，没事，咱们再来一个，再来个什么，再来一个黄色，咱们主要看的是数据。那这块呢，你要注意一件事，什么事，咱们最新的这个属性是咱们应该知道是谁失重。

对不对，而肉其实也是在这个数组里面对吧，其实肉是谁？肉就是索引值为二的这个元素。那你要注意啊，你萨姆在遍历这个数组的时候，你应该把自身抛出去。对不，你不能拿自己的value name和自己判断，那永远是咋的，永远是呃，重复的。对不？所以说你这个some在便历的时候要注意一件事，什么事，你便利的是这三个元素。对不，那你应该把最新的这个值给它抛出去，抛出去拿肉跟这俩比，零和一比。那所以说这块怎么办呢？那item是什么？Item是你那个数组当中的每一个属性值三。对不，那这块呢一定要注意，咱们呢需要讲讲什么肉从数组里面判断的时候怎么的去除。那怎么整呢？比如说如果如果什么如果你的肉不等等于啊，就是不等于艾，那这代表的是什么？

这代表的是肉。哎这哎等会等哎这个没了是吧，哎，咱们刷个新看一下子老师呢，还是把这个数据呢，给你调试一下子走，你看比如说老师来一个颜色。对不来一个黄色。对吧，咱们再来，比如说再来一个粉色。再来一个黄色。那这块呢，要注意，那咱们的肉是谁，其实就是最后的一个黄色，对吧，那肉不等于it，也就是说不等于谁，不等于这个咱找到这个数据。啊，还是看数据不等于item item是HC3元素，也就是说你的肉不等于索引值为二的这个元素，那代表的是不是，呃，代表的是不是走这个if的这个item是谁？是不是零和一这两个元素。对不？这块呢，一定要注意肉是谁，老师再说一遍，肉是这个数组索引值为二的这个元素。

012比如说肉不等于I是什么？是012。对吧，因为some会变利的时候，It特谁是012啊，也说肉不等于it特，也就说不等于谁不等于二的这个这个对象，也就说走这个if的是不是零跟一。对不，那也就是说这块你可以判断怎么判断，比如。如果你的肉点value name等等于谁等等于item的value name。那也就是说，如果相等的是不是出现重复了，那么some，咱们应该知道它会返回一个布尔之针。对不，Let一个，谁叫做is repeat。对吧，那咱们呢，可以打印一下子conso.log is repeat，看它有没有重复。对吧，那如果有重复了，你不应该让他新增对吧，所以咱们看一下手机，手机通讯手机添加个属性对吧，比如说颜色。那咱们呢，添加一个属性值，比如说黄色。

对不？咱们再来一个粉色。对吧，那以及老师再来一个什么，我再来一个黄色，那是不是出现重复了，那是不是就是真。对不，所以说这块呢，代码呢，一定要注意，那老师写肉是什么，肉是最新，哎最新新增的，哎新增的属性值，其实说白了它是谁，它是数组的最后一项元素。那这里呢，要注意一件事，就是判断，呃，判断的时候，那么需要把已有的数组当中。哎，数组当中数组。当中新增的。这个属性值是不是要去除判断对吧，你不能拿自己跟自己比。对吧，那这块呢，写起来就简单了。那就是说，如果出现了重复的情况，Is repeat如果为真，那你就不执行后面代码就行了。

对吧，所以说呢，像这两种情况啊，都要注意对吧，那这回呢，咱们的回首再测试一下子O不OK，老师呢，把这个给它关掉对吧，手机。手机通讯手机添加属性，比如说来一个颜色。对吧，啊颜色那添加属性值，比如说你输入的是空格不行。对吧，你必须得输入一个相应正确的属性值，比如说黄色。对吧，那以及比如说你再来一个黄色也是不行的。对吧，黄色一可以对吧，所以说这两个注意事项也需要注意一下。