Vue.js + Safari で Array に対して for in していた結果、臨死体験

2016-09-10

$set パワー。

期待されていたもの

for in (before): [0, 1, 2]
for in (after): [0, 1, 2]
map: [0, 1, 2]

Safari がくれたもの

for in (before): [0, 1, 2]
for in (after): [0, 1, 2, 0, 1, 2]
map: [0, 1, 2]

$set でフシギなパワーがエンチャントされる

var p1 = document.querySelector('#before')
var p2 = document.querySelector('#after')
var p3 = document.querySelector('#map')

var v = new Vue({ data: { array: null } })

var a = [0, 1, 2]

var b1 = []
for(var i in a){ b1.push(a[i]) }
p1.innerHTML = b1.join(', ')

v.$set('array', a) // <- ここでうまれかわる

var b2 = []
for(var i in a){ b2.push(a[i]) }
p2.innerHTML = b2.join(', ')

p3.innerHTML = a.map(function(n){ return n }).join(', ')

JSFiddle での実行

Tracing an array with "for in" Man in Safari will be unhappy. - JSFiddle (Safari でみよう)