v-model的重置（重置data）

最近做一个官网，有一项是地址添加进数组，使用了v-model。通常了v-model的使用都是表单提交跳转的。

这次是本页进行添加到数组。

开始写的时候直接v-model，确定保存push进数组。

第一次完全没问题。第二次打开（或第一次取消）v-model的数据还在且当弹窗内的v-model改变，已经push的数据也跟着改变，这表示他们使用的都是同一内存空间，这个地方需要深拷贝或另一开辟内存空间。

于是搜寻一番，找到这个方法

Object.assign（target，... sources）
 
复制一个对象
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

这解决了同一内存空间的问题。push之前先定义一个新的对象，再进行push

let newAdd = Object.assign({}, this.add);
this.addList.push(newAdd);

同理，再用它重置为打开时候的data状态，就可以了

Object.assign(this.$data.add, this.$options.data().add);

还有一种v-model的情景就是mpvue了，mpvue的v-model修改后不变，即使页面已经离开，你再进入v-model的数据也是保留最后的状态和数据。这问题致使很多v-if失效（变化不大的页面我都是v-if判断重复使用）。

在开始的时候我用的是进入或离开分别this.XXX = null || Numbar || ....

现在看可太笨了，而且写漏了还得一个一个找，也苦不堪言。使用Object.assign（）可以直接重置data里面的数据。包活vue的data也一样使用。

Object.assign(this.$data, this.$options.data());

注意

针对深拷贝，需要使用其他办法，因为Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用那么它也只指向那个引用。

参考： developer.mozilla.org/zh-CN/docs/…

9102年了，别在用for...in...了

map()

let givenArr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
console.log(givenArr.toString().split(',').map(v => +v)) // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
还可以里面增加排序等等 .sort((x, y) => { return x < y ? -1 : 1 })

这个题之前看到过，留意过答案，太舒服了。

map之前也就看过，最近是在不想for in了

all() {
  this.itemArr.map(v => (v.activt = true)); //全选activt = true 
  // v.activt = !v.activt = true 有选择过的就会唱反调了 全选一个方法
  取消一个方法也不是特别好，还没找到更好的方法，先这样吧
  this.allActivt = !this.allActivt; if更改css样式
},
旧的做法大概
for(let i in this.itemArr) {
    this.itemArr[i].activt = true
    ...或者做判断if...else
}

这全选虽然做好了，但是这个判断不准确。我自己手动点满了，或者空了一个怎么选择样式？

当然最简单就是for...in，这当然不行。

filter()

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);// 32,33,40
}

这里可以看到，返回age大于18的元素。我们如此类推。

select(index) {
    this.itemArr[index].activt = !this.itemArr[index].activt;
    let newArr = this.itemArr.filter(item => item.activt != true); ES6 写法
    newArr.length == 0 ? (this.allActivt = true) : (this.allActivt = false);
    // 长度等于0就是全部都是true,我们就给设置data里的allActivt = true,否则为false
},

可能也写的很菜，但总比for...in好，不是吗。

参考:

map() www.runoob.com/jsref/jsref…

filter() www.runoob.com/jsref/jsref…

Vue的混入

开始写mpvue项目的时候，我就没想转发这事，除了活动诱导谁用转发- -

mpvue默认不显示转发的，得自己调用。

onLoad() {
    wx.showShareMenu();//加载时候调用，需要自定义转发更改
}
onShareAppMessage(res) function {} //自定义转发,小程序一样

当时懒，我在全部文件的onLoad增加 wx.showShareMenu();

后面看了一下Vue文档:

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

main.js
Vue.mixin({
    onLoad() {
        wx.showShareMenu(); //全局加载转发 包括data的重置也可以这里写，不过项目较大。就不过多处理。
    }
})

参考： cn.vuejs.org/v2/guide/mi…

前端笔记【2】

v-model的重置（重置data）

9102年了，别在用for...in...了

Vue的混入