css - VUEJS : Is it possible to process/modify data retrieved through v-for before displaying?

Question

您好，总体而言，我对 Web 应用程序开发/javascript 非常陌生。在过去的 4 个月里，我只给自己上了 udemy 视频的速成类(class)。

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

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。我还想通过使用 white-space: pre-wrap 将空格保留为用户输入的方式。

( https://i.imgur.com/dwaJHT9.png )

但问题是这两种风格不能很好地协同工作。如下图所示，如果我单独使用 justify，它的行为正常(除了丢失空格)。但是，如果我将 text-align:justify 和 white-space: pre-wrap 结合使用，文本最终会以间距对齐，但会以一种奇怪的方式对齐。

( https://i.imgur.com/DQSfOya.png )

对于简短的条目，当起始端应与列的左侧对齐时，它们以奇怪的缩进开头。这个问题似乎不仅仅是开头的空格，因为我已经按照贡献者的建议尝试了 .trim()。

( https://i.imgur.com/uwysk9X.png )

我尝试调整 CSS，使用 text-align-last、text-align-start、direction: ltr、pre-tags 等。但它无法正常工作。 来自其他 SO 页面的建议建议在显示之前通过执行将所有\n 替换为 br 的字符串来处理数据。

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

由于我的数据是从数据库中获取的，所以我对如何实现数据预处理感到困惑，因为我的数组大小是动态的并且因每个用户而异。

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

下图是我的对象数组 (logRepository) 的样子。格式主要是由于 mongoDB 模式。( https://i.imgur.com/7SilcF7.png )

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

我修改了 .then block 中的对象变量，并将所有\n 字符替换为
标记。

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

有了它，我的显示不再需要“white-space: pre-wrap”样式。但是，由于我之前使用字符串插值来显示我的数据，因此
标记被视为纯文本。

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

我必须修改标签以使用 v-html 绑定(bind)将数据显示为 html 文本，这样
才能工作。在最后一张图片中可以看出差异。

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

感谢您在这方面的帮助，因为我对 javascript 还很陌生。

Answer 1

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

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