Nuxt.js 根据嵌套更改数据属性中 json 数据的格式

Question

我有以下简单的 vue 组件，其属性 data-hs-go-to-options 包含 json 数据。

<template>
  <div>
    <a
      class="js-go-to go-to position-fixed"
      href="javascript:;"
      style="visibility: hidden"
      data-hs-go-to-options='{
          "offsetTop": 700,
          "position": {
          "init": {
              "right": 50
          },
          "show": {
              "bottom": 15      
          },
          "hide": {
              "bottom": -15
          }
          }
          }'
        >
      <i class="fas fa-angle-up"></i>
    </a> 
  </div>
</template>

当我构建 nuxt 应用程序并尝试使用以下命令获取数据属性时

$('.js-go-to').attr('data-hs-go-to-options')

我收到这个：

"{
        "

当我从上面的模板中删除 div 元素，再次构建并运行命令时，我得到了正确的内容：

"{
      "offsetTop": 700,
      "position": {
      "init": {
          "right": 50
      },
      "show": {
          "bottom": 15      
      },
      "hide": {
          "bottom": -15
      }
      }
      }"

使用 div 渲染的网站内容如下所示：

<div><a href="javascript:;" data-hs-unfold-options="{
                    "target": "#footerLanguage",
                    "type": "css-animation",
                    "animationIn": "slideInDown"
                    }" class="js-hs-unfold-invoker dropdown-toggle btn btn-xs btn-soft-secondary"></a></div>

没有像这样的 div：

<a href="javascript:;" data-hs-unfold-options="{
                  &quot;target&quot;: &quot;#footerLanguage&quot;,
                  &quot;type&quot;: &quot;css-animation&quot;,
                  &quot;animationIn&quot;: &quot;slideInDown&quot;
                  }" class="js-hs-unfold-invoker dropdown-toggle btn btn-xs btn-soft-secondary"></a>

我不知道为什么会这样，有人可以帮忙吗？

Answer 1

Vue 在这种情况下将您的 JSON 视为 string。

<template>
  <div>
    <a
      class="js-go-to go-to position-fixed"
      href="javascript:;"
      style="visibility: hidden"
      data-hs-go-to-options='{
          "offsetTop": 700,
          "position": {
          "init": {
              "right": 50
          },
          "show": {
              "bottom": 15      
          },
          "hide": {
              "bottom": -15
          }
          }
          }'
        >
      <i class="fas fa-angle-up"></i>
    </a> 
  </div>
</template>

通过在指令前添加: 将数据绑定到元素，因此您告诉Nuxt它应该是object，而不是string：

<template>
  <div>
    <a
      class="js-go-to go-to position-fixed"
      href="javascript:;"
      style="visibility: hidden"
      :data-hs-go-to-options='{
        "offsetTop": 700,
        "position": {
          "init": {
            "right": 50
          },
          "show": {
            "bottom": 15      
          },
          "hide": {
            "bottom": -15
          }
        }
      }'
    >
      <i class="fas fa-angle-up"></i>
    </a> 
  </div>
</template>

如果你在 jQuery 中使用它，那么首先使用JSON.stringify()，所以所有内容都会根据需要进行转义：

<template>
  <div>
    <a
      class="js-go-to go-to position-fixed"
      href="javascript:;"
      style="visibility: hidden"
      :data-hs-go-to-options='JSON.stringify({
        "offsetTop": 700,
        "position": {
          "init": {
            "right": 50
          },
          "show": {
            "bottom": 15      
          },
          "hide": {
            "bottom": -15
          }
        }
      })'
    >
      <i class="fas fa-angle-up"></i>
    </a> 
  </div>
</template>