Как сделать перенос на новую строку с определенного символа Vue.js

Question

Как сделать перенос, чтобы каждая новая строчка начиналась с знака | и текстом после него до следующего знака

Answer 1

Преобразуем строку в массив с разделителем |

const str = '| text [ | text | text ] | text [ | text ] | text';
const listRender = str.split('|')

Значение listRender сохраним в состоянии

export default {
  name: "HelloWorld",
  data() {
    return {
      list: listRender
    };
  },
};

Результат выводим при помощи v-for:

<template>
  <div v-for="item in list">
    <div>{{ item }}</div>
  </div>
</template>