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)

Answer 2

我认为您也可以借助计算属性将空间转换为下划线。

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    underScoreName: function (name) {
      return name.split(' ').join('_')
    }
  }
})

您可以使用此underScoreName计算属性将空格更改为下划线。

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

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

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

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

将包含空格的div名称传递给Vue

2 个答案: