javascript - 将带有空格的 div 名称传递给 Vue

Question

我有一个表，我在其中使用 Vue 动态创建 div 的 ID。代码如下所示:

  <table>
    <tbody>
      <tr v-for="(group, index) in groups" >
        <td>

          <a data-toggle="collapse" :href="'#users-in-'+encodeURIComponent(group.gname)" aria-expanded="false" :aria-controls="'users-in-'+encodeURIComponent(group.gname)" v-text="group.gname"></a>

          <div class="collapse" :id="'users-in-'+encodeURIComponent(group.gname)">
            <p>some stuffs</p>
          </div>

        </td>
        <td>
          <p>Some other stuff</p>
        </td>
      </tr>
    </tbody>
  </table>

这个想法是为每个组动态生成#users-in-someGroupName div 名称。上面的示例运行良好，但当我的组名称中有空格时，它会崩溃。在控制台中我收到 JQuery 错误:

Error: Syntax error, unrecognized expression: #users-in-some%20group%20with%20space

我添加了 encodeURIComponent 来缓解它，但 Vue/JQuery 似乎无法处理这个问题。如何在 div 名称中传递空格？

Answer 1

尽管 id in HTML 5在字符方面几乎不受限制，看起来 Bootstrap 确实希望它们是 HTML-4 compliant .

而不是 encodeURIComponent (用其他特殊字符替换特殊字符)，而是将函数写入 Replace special characters in a string with _ (underscore)