Replace space with new line in vue js

I am trying to replace the spaces between the name to new line in vuejs but I am not able to achieve it. Please help me find where I going wrong. Right now the names are showing as

Jack William

but I want it to display as

Jack
William

Below is the code.

<template>
  <div>
      <v-container fluid>
        <v-layout row wrap>
          <v-flex xs12 sm12 md2 v-for='user in users'>
            <v-card>
              <v-card-title>{{ formatUserName(user.name) }}</v-card-title>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      users: []
    }
  },
  created: function() {
    this.fetchUsers()
  },
  methods: {
    formatUserName(value) {
      debugger
      return value.replace(/s/g, 'n')
    },
    fetchUsers() {
      this.$axios.get('/users.json')
        .then(response => {
          this.users = response.data;
        });
    },
  }
}
</script>

Answer

You could do this entirely in CSS with word-spacing set to a high value:

Set a one-word-per-line class on the <v-card-text>.

<v-card-text class="one-word-per-line">{{ user.name }}</v-card-text>

Add a style for that class to set word-spacing to 100vw.
```
.one-word-per-line {
  word-spacing: 100vw;
}
```

demo

Advertisement

Answer