CODEWITHSUNDEEP
javascriptvue.js
user14872626
user14872626

Reputation:

How to render line-break ↵ in VueJS?

I want to render a line break whenever there's a ↵ in Vue.

I followed How can I use v-html on the vue? but I am unable to follow.

What I have tried:

var app = new Vue({
  el: '#app',
  data() {
    return {
      a: {
        country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City",
      },
      testObj: "",
    };
  },
  computed: {
    jsonFunc() {
      return (this.testObj = this.a.country.replace(/↵/g, "<br/>"));
    },
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    Vue
    {{ jsonFunc }}
  </div>
</div>

Upvotes: 1

Views: 306

Answers (1)

GMKHussain
GMKHussain

Reputation: 4661

Use v-html directive

<template>
  <div >
    Vue
    <span v-html='jsonFunc'></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: {
        country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City",
      },
      testObj: "",
    };
  },

  computed: {
    jsonFunc() {
      return (this.testObj = this.a.country.replace(/↵/g, "<br/>"));
    },
  },
};
</script>

Upvotes: 1

Related Questions