[Vuejs]-Passing div names with spaces to Vue

by

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)

👤Roy J

0👍

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>
👤No one

Leave a comment