Question

在使用babel在Vue中创建新系统后，我开始测试与旧设备的兼容性。我们的babel正在将源代码与webpack一起发送到es2015。

我现在用browserstack对Ios＆amp;机器人。较新的操作系统适用于两个平台。但是在使用默认浏览器的Android手机上，I get an error in sentry表示; Duplicate data property in object literal not allowed in strict mode 它没有给出任何关于这可能是什么的提示，从而使调试过程变得非常困难。

我现在可以看到隧道尽头唯一的亮点是ios部分。运行IOS的Ios设备＆lt; 9表示错误 Attempted to redefine property 'value'. also in sentry

如果我没有误会，ios问题是同一问题的重写错误？在我阅读over here时，我认为“价值”＃39;可能在对象或元素中定义两次。

这一切都包含了一个问题，如何找到重复的数据属性？

Answer 1

我在旧的android设备上报告了相同的问题，这是我所做的：

我们的组件既包含mapActions(["something"])，也包含定义的方法something() { this.$store.dispatch('something') } 所以我删除了方法声明。

它仍然没有起作用，所以我检查了eslint上的build main.xxxx.js 并在诸如domProps:{value:t.value,value:t.value}之类的地方找到了“尝试重新定义属性'值'” 查找代码，发现我们的组件既包含v-model和:value，也包含一些使用v-model和:checked的复选框。我只保留了v-model，它仍然有效。

似乎问题也可能来自重复的道具，例如：https://www.tutorialfor.com/blog-267252.htm

Answer 2

你能分享一些代码（只是几个组件的区域吗？）

要检查的一件事是在data()内，确保您要返回一个对象。当我开始使用Vue时，这发生在我身上。

示例：

// component a
data () {
  a: ''
}

// component b 
data () {
  a: '' // ERROR! Duplicate
}

这是因为data合并在主Vue实例上。所以在这种情况下它应该看起来像：

// component a
data () {
  return {
    a: ''
  }
}

// component b 
data () {
  return {
    a: '' // ok now
  }
}

如果没有一些代码，很难做出任何其他的猜测。

Answer 3

我设法找出错误发生在哪一行，并发现我使用名为Vue-numeric的插件创建了重复值：

 domProps: {
   value: n.value,
   value: n.amount
 },

我不小心将插件锁定在出现此问题的旧版本上。只需更新就可以解决这个问题。

感谢@xenetics在这个问题上花时间。

Answer 4

是的，这是一个仅在ES5严格模式下有效的限制，您明显使用这些环境。它绝对有意义，但由于计算属性而在ES6中放松了 - 有关详细信息，请参阅What's the purpose of allowing duplicate property names?。这就是为什么babel在转换时不会抱怨它。

要在代码库中的对象文字中找到这些（有效但无意义的）重复属性名称，您可以使用带有针对这些属性的规则的such as ESLint。

在对象文字中有效地找到重复的数据属性？

4 个答案: