Javascript "includes"通过破折号分割数组中的项目(VueJS)

Question

我正在使用 VueJS 和 Laravel 构建一个应用程序。

TLDR；

VueJS 中的

includes 函数没有提供与 Javascript 中相同的输出。它通过破折号分割数组中的值。有没有办法防止这种情况发生？

设置

我有一个包含语言列表的 JSON，包括它们的键和值。例如:

{"en":"English","en-au":"English (Australia)"}

我导入此列表，然后将其作为值语言推送到data中

然后，为了分隔已选择的语言列表，我有一个隐藏的输入，其中包含这些预先选择的语言的数组:

<input type="hidden" value="['en-ca', 'pt']" name="used_languages" id="used_languages">

然后，为了测试，我将它们放入 foreach 循环:

<li v-for="(value, key) in languages" v-if="used_languages.includes(key)">@{{ value }}</li>

问题

但是，奇怪的是，对于这个示例，以下语言出现在前端:

• 加泰罗尼亚语
• 英语
• 英语(加拿大)
• 葡萄牙语(葡萄牙)

请注意，used_languages 的值数组中只有加拿大英语和葡萄牙语。

看起来includes正在用破折号分割en-ca并查看是否en或ca都在列表中，然后将它们以及 en-ca 作为一个整体。

这不是预期的行为。

期望的行为:

查看文档，应该是这样的: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

它应该只过滤掉加拿大英语和葡萄牙语。

问题

有谁知道为什么会发生这种情况以及如何解决它？

欢迎提出任何意见和问题!

非常感谢!

回答

感谢@SteveArcher 的大力帮助!为了通过我的例子清楚地表达史蒂夫的观点，我必须做的是:

• 将我的输入值(一种字符串中的数组)更改为实际数组。由于它总是在引号中，所以我决定将其设为逗号分隔的列表，然后在 JS 中将其转换为数组。

旧:

<input type="hidden" value="['en-ca', 'pt']" name="used_languages" id="used_languages">

新:

<input type="hidden" value="en-ca,pt" name="used_languages" id="used_languages">

请注意，其中没有空格。这很重要。

• 然后，如上所述，我需要将这个逗号分隔的列表转换为 JS 中的数组(在 Vue 中创建的函数内):

旧:

this.used_languages = doc.getElementById('used_languages').value

新:

this.used_languages = doc.getElementById('used_languages').value.split(',')

再次感谢史蒂夫!

Answer 1

您正在字符串 "['en-ca', 'pt']" 上运行 .includes，而不是数组 ['en- ca', 'pt'] 如您所料。对于字符串，includes 将匹配任何子字符串(请参阅: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes )，这就是它匹配 "en" "en-ca" "ca 的原因” 和 “pt”。在调用 .includes 之前将该字符串转换回数组，您将获得成功!