Javascript 如何渲染换行符↵；在表中-Vuejs？

我面临的问题与你的完全相同

我希望在出现错误时渲染换行符↵ 在Vue中，表中有一个值，表的数据作为JSON对象来自API。因此，对于我链接的问题，我无法遵循公认的答案（因为我不确定如何在表中渲染换行符）

我所尝试的：

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: ["first_name", "last_name", "age", "hobbies"],
      items: [
        {
          isActive: true,
          age: 40,
          first_name: "Dickerson",
          last_name: "Macdonald",
          hobbies : "Reading↵ Singing"
        },
        { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw", hobbies : "Surfing↵ Stamp Collecting↵ Games" },
      ],
    };
  },
};
</script>

导出默认值{
数据（）{
返回{
字段：[“名字”、“姓氏”、“年龄”、“爱好”]，
项目：[
{
是的，
年龄:40,，
名字：“迪克森”，
姓：“麦克唐纳”，
爱好：“阅读↵ 歌唱”
},
{I主动：错，年龄：21岁，名：“拉尔森”，姓：“肖”，爱好：“冲浪”↵ 集邮↵ 游戏“}，
],
};
},
};

---

提前感谢：）

您可以在迭代

计算的
属性中的
项的元素时使用此解决方案，并添加
空白：前置行将样式设置为
b表
以保留新行：


newvue({
el:“应用程序”，
数据（）{
返回{
字段：[“名字”、“姓氏”、“年龄”、“爱好”]，
项目：[
{I主动：对，年龄：40岁，名：“查尔斯”，姓：“麦克唐纳”，爱好：“阅读”↵ 唱着",，
{I主动：错，年龄：21岁，名：“拉尔森”，姓：“肖”，爱好：“冲浪”↵ 集邮↵ 游戏“}
]
}
},
计算：{
myItems:function（）{
//迭代项目
返回此.items.map（item=>{
//复制当前项目
const current=Object.assign（{}，item）；
//迭代项键
Object.keys（当前）.forEach（key=>{
//如果此键的值是字符串，请替换
if（当前[键]=“字符串”的类型）
当前[键]=当前[键]。替换(/↵/g、 “\n”）；
});
回流；
});
}
}
});
您可以在迭代
computed
属性中
项的元素时使用此解决方案，并添加
空白：前置行将样式设置为
b表
以保留新行：


newvue({
el:“应用程序”，
数据（）{
返回{
字段：[“名字”、“姓氏”、“年龄”、“爱好”]，
项目：[
{I主动：对，年龄：40岁，名：“查尔斯”，姓：“麦克唐纳”，爱好：“阅读”↵ 唱着",，
{I主动：错，年龄：21岁，名：“拉尔森”，姓：“肖”，爱好：“冲浪”↵ 集邮↵ 游戏“}
]
}
},
计算：{
myItems:function（）{
//迭代项目
返回此.items.map（item=>{
//复制当前项目
const current=Object.assign（{}，item）；
//迭代项键
Object.keys（当前）.forEach（key=>{
//如果此键的值是字符串，请替换
if（当前[键]=“字符串”的类型）
当前[键]=当前[键]。替换(/↵/g、 “\n”）；
});
回流；
});
}
}
});
只需使用CSS即可

<style>
.table tbody tr td {
  white-space: pre-wrap
}
</style>

只需使用CSS

<style>
.table tbody tr td {
  white-space: pre-wrap
}
</style>

问题应该是独立的：不要链接到外部代码，而不是在问题中发布代码（在问题中除了代码之外还有一个链接是可以的）。另外：如果你面临完全相同的问题，那么告诉我们为什么链接问题中的答案对你没有帮助！它不是外部代码。我创建了这个codesandbox，让那些试图“帮助”的人发现它很有用，因为他们可以看到实时结果。它是Stackoverflow的外部工具。你的问题应该只需要这里的信息就可以回答。好的，谢谢：）问题应该是独立的：不要链接到外部代码，而不是在问题中发布代码（在问题中除了代码之外还有一个链接就可以了）。另外：如果你面临完全相同的问题，那么告诉我们为什么链接问题中的答案对你没有帮助！它不是外部代码。我创建了这个codesandbox，让那些试图“帮助”的人发现它很有用，因为他们可以看到实时结果。它是Stackoverflow的外部工具。你的问题应该只回答这里的信息。好的，谢谢：）嗨，谢谢。但是，当使用时，文本的字体正在更改。还有其他方法吗？@SriVineeth我更新了答案，使用
css
insteadHi，谢谢。但是，当使用时，文本的字体正在更改。还有其他方法吗？@SriVineeth我更新了答案，改为使用
css