如何使用 Nuxt Js 将数据属性添加到脚本标签？

Posted 2023-02-22

【中文标题】如何使用 Nuxt Js 将数据属性添加到脚本标签？

【英文标题】：How Can I add data attribute to script tag using Nuxt Js?

【发布时间】：2021-01-16 08:25:12

【问题描述】：

<script src="https://js.sample.js/fetchsample" data-cb-site="your-site"   
 data-cb-fbq-enabled="true"> 
</script>

我有这个脚本。 在nuxt js中我们有这种结构

 script: [
src: "https://js.sample.js/fetchsample" , data-cb-site="your site",  data-cb-fbq-enabled="true" 
]

但我在添加 data-cb-ste 和 data-cb-fbq-enabled 数据属性时遇到错误。 错误：

SyntaxError: Unexpected token -
  at new Script (vm.js:86:7)
  at Generator.next (<anonymous>)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)

请帮帮我。

提前致谢。

【参考方案1】：

您得到的 SyntaxError 中有一个提示：

SyntaxError: Unexpected token -

引号之外的属性名称中不允许使用破折号-。

因此您需要将 data-cb-site 更改为 "data-cb-site" 在对象字面量中定义它的位置。

当您访问名称中带有破折号 - 的字段时，您必须使用方括号表示法，例如object["data-cb-site"] 不是 object.data-cb-site。

script: [
  
    src: "https://js.sample.js/fetchsample", 
    "data-cb-site": "your site",
    "data-cb-fbq-enabled": "true"
  
]

【讨论】：

@isherwood 实际上是在发布问题时输入错误。@sdgluck 答案工作正常。

不过，没有任何关于操作性变化的解释。我认为它是键上的引号（由于连字符可能是必需的），但应该说明。