Passing div names with spaces to Vue

Question

I have a table in which I dynamically create IDs for divs, using Vue. The code looks like this:

  <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>

The idea is to dynamically generate #users-in-someGroupName div names for each group. Above example works well, but it crashes when I have spaces in group names. In console I get JQuery error:

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

I added encodeURIComponent in order to mitigate it, but it seems Vue/JQuery cannot handle this. How can I pass spaces in div names?

There is no explicit jQuery code, the table is inside a pane, which is inside a tab. They're all built on Bootstrap though. The stack trace refers only to jQuery and Bootstrap code. — adamczi, Jan 17 '18 at 19:32
https://stackoverflow.com/questions/41355252/bootstrap-tabs-with-special-character-ids — Roy J, Jan 17 '18 at 19:35

score 2 · Accepted Answer · answered Jan 17 '18 at 19:42

2

Although an id in HTML 5 is pretty much unrestricted in terms of characters, it looks like Bootstrap really wants them to be HTML-4 compliant.

Rather than encodeURIComponent (which replaces special characters with other special characters), write a function to Replace special characters in a string with _ (underscore)

answered Jan 17 '18 at 19:42

Roy J

42,522
10
78
102

Thanks a lot! I tried to avoid that (because it will affect my backend and DB a bit), but it seems to be the only way here. I missed this in the docs. – adamczi Jan 17 '18 at 19:43

score 0 · Answer 2 · answered Jan 18 '18 at 18:52

I think you can also take help of computed property to convert space to underscore.

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

You can use this underScoreName computed property to change space into underscore.

<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>

Passing div names with spaces to Vue

2 Answers2