How add a new line with () in vue js data

Question

here is the code

<template>
  <div>
    <p>Add A Review</p>
    <input
      v-model="test"
      type="text"
    >
    <button @click="showRev()">
      Add
    </button>
    <p>Your Review : {{ res }}</p>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        test: '',
        res: '',
      }
    },
    methods: {
      showRev () {
        this.res += this.test + '<br/>'
      },
    },
  }
</script>
<style scoped></style>

Answer 1

Mustache operator (shorthand syntax for v-text directive) only prints strings, or call the default toString() method for objects.

So here it will print '</br>' as a string and not compile it as HTML.

If you need this, you can use the v-html directive (documentation), to make vue understand you want it to render the parameter as HTML.

<template>
  <p>Your Review : <span v-html="res" /> </p>
</template>

---

Note: but if you only need to add a line return after your text, I suggest you to read this thread about new lines in HTML: Line break in HTML with '\n'