遇到问题
前两天做项目遇到问题，发现自己基础不扎实，现记录问题如下：
src/components/base/MySelect.vue
export default {
name: "MySelect",
props: {
model: [String, Number],
placeholder: String,
options: [Array, Object],
k: {
type: [String, Number],
default: "id",
},
value: {
type: String,
default: "name",
},
kWidth: {
type: String,
default: "200px",
},
kHeight: {
type: String,
default: "30px",
},
clearable: {
type: Boolean,
default: false,
},
default() {
return "";
},
},
data() {
return {
select: this.model,
};
},
};
3.15 makeMap 生成一个 map （对象）
传入一个以逗号分隔的字符串，生成一个 map(键值对)，并且返回一个函数检测 key 值在不在这个 map 中。第二个参数是小写选项。
/**
* Make a map and return a function for checking if a key
* is in that map.
*/
function makeMap (
str,
expectsLowerCase
) {
var map = Object.create(null);
var list = str.split(',');
for (var i = 0; i < list.length; i++) {
map[list[i]] = true;
}
return expectsLowerCase
? function (val) { return map[val.toLowerCase()]; }
: function (val) { return map[val]; }
}
// Object.create(null) 没有原型链的空对象
- 作者：盛夏晚清风
- 链接：https://www.jianshu.com/p/459f413b1e8e
- 来源：简书
- 节选：
我现在删除第二项（内容为”22″），页面上和 vue-devtools 里的数据都符合预期。
所以问题应该是出在这个子组件的使用上。
翻看文档后，我发现了 “key” 这个特殊属性（文档里关于 key 的两处介绍：教程、API 文档），由此我们知道：
用 v-for 正在更新已渲染过的元素列表时，它默认采用”就地复用”策略，该模式是高效的，但是只适用于不依赖子组件或者临时 DOM 状态（例如：表单输入值）的列表渲染输出。
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列列表元素顺序，并且会移除 key 不存在的元素。
由于我的列表的每一项都是子组件，所以显然我的列表依赖了子组件，所以应该在每一项加”key”，使上面提到的”就地复用”策略失效。于是现在只需要给数组中的每项添加一个唯一标识 key 就可以了。 - 结论：
这个结果是符合我们预期的：由于修改的数据的 key 值没有改变，该 key 值对应的数据也不会更新视图。
所以我们只需要在改变数据 value 的同时，改变它的 key 值：
src/components/base/MyCheckbox.vue
export default {
name: 'MyCheckbox',
props: ['model', 'name'],
data() {
return {
checked: this.model
}
}
}
{{ item.checked }}
- 有啦，下午把前面的问题都可以解决了，加油~
- 自己手头的项目都不好好做，以后该如何？
- 要有三心：细心、耐心、恒心！
- 要巩固基础，夯实基础！
- 加油！
参考链接
Original: https://www.cnblogs.com/djsz3y/p/16206522.html
Author: SnippetsLab
Title: 一通百通
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/605317/
转载文章受原作者版权保护。转载请注明原作者出处！