Question

您好，我是Web应用程序开发/ javascript领域的新手。在过去的4个月中只提供了udemy视频的速成课程。

对于我的Web应用程序，我正在使用axios通过服务器端后端从数据库中检索数据。我有一个logRepository Array，将检索到的数据推送到其中。

data() {
      return {
        logRepository: [],
      }
    },
created() {
      axios.get('/myrestapiroute', {
        headers: {
          'Authorization': `Bearer ${this.$store.state.token}`
        },
        params: {
          userId: this.userId
        }
      })
      .then(res => {
        const data = res.data.logs
        this.dataCheck = data
        for(let key in data) {
          const log = data[key]
          log.id = key
          this.logRepository.push(log)
        }
      })

在模板上，我使用v-for遍历所有检索到的数据元素：

 <div ..... v-for="(log,index) in logRepository" :key="index">

使用v-for时，一个示例说明如何在段落标记中显示数据。格式取决于数据的结构。

<p style="text-align: justify;">
 {{ log.logId.jobPerformed }}
</p>

当我尝试将样式应用于文本时会出现问题。如您在上面看到的，我想使用 text-align：justify 。我还想保留空白，就像用户通过使用空白：预包装来输入空白一样。

（https://i.imgur.com/dwaJHT9.png）

但是问题是这两种样式不能很好地协同工作。如下面的图片所示，如果我自己使用对齐，则它的行为正常（除非空格丢失）。但是，如果我将text-align：justify和white-space：pre-wrap结合使用，则文本最终会以空格对齐，但以一种奇怪的方式对齐。

（https://i.imgur.com/DQSfOya.png）

对于简短输入，当起始侧应与列的左侧对齐时，它们以怪异的缩进开始。起初，问题似乎不仅仅是空格，就像我尝试的那样，是由贡献者建议的.trim（）。

（https://i.imgur.com/uwysk9X.png）

我试图用text-align-last，text-align-start，Direction：ltr，pre-tags等来调整CSS，但是它不能正常工作。 其他SO页的建议建议通过在显示前对所有\ n至br进行字符串替换来处理数据。

是否可以在显示之前对从v-for获得的单个数据进行处理，或者必须使用计算的属性对数组进行处理？

由于要从数据库中获取数据，因此我对如何实现数据的预处理感到困惑，因为我的数组大小会动态变化，并且对于每个用户而言都是不同的。

在这种情况下显示之前实现数据预处理的最佳方法是什么？

下图是我的对象数组（logRepository）的外观。该格式主要归因于mongoDB模式。（https://i.imgur.com/7SilcF7.png）

========解决方案=======

我在.then块中修改了对象变量，并对所有\ n字符执行了字符串替换，将其替换为
标记。

https://i.imgur.com/EtLX2tg.png

因此，我的显示不再需要“空白：预包装”样式。但是，由于我以前使用字符串插值来显示我的数据，因此
标记被视为纯文本。

https://i.imgur.com/zUbNZbI.png

我必须修改标签以使用v-html绑定将数据显示为htmltext，以便
起作用。差异可以在最后一张图片中看到。

https://i.imgur.com/sCTsCV4.png

感谢您的帮助，因为我是javascript新手。

Answer 1

您可以在此处使用多种模式来预处理数据。

使用您创建的then函数处理数据
将数据包装在模板的{{ ... }}块内的函数中
创建一个组件，该组件用作v-for循环所迭代的元素，以显示计算出的值
将计算值用作主模板中v-for指令的源数组。通常使用映射到源数据的处理功能来完成此操作，如log.map( data => data.logId.jobPerformed.trim()

VUEJS：是否可以在显示之前处理/修改通过v-for检索到的数据？

========解决方案=======

1 个答案: