VUEJS：是否可以 process/modify 在显示之前通过 v-for 检索数据？

Question

您好，总的来说，我是 Web 应用程序开发的新手/javascript。在过去的 4 个月里，我只给自己上了 udemy 视频的速成课程。

对于我的 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。我还想保留 whitespace 用户通过使用 white-space: pre-wrap.[=21= 输入的方式]

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

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

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

对于简短的条目，它们以奇怪的缩进开头，而起始端应与列的左侧对齐。这个问题似乎不仅仅是一开始的白色spaces，正如我所尝试的那样。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 块中的对象变量，并将所有 \n 字符替换为
标记。

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

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

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

我必须修改标签以使用 v-html 绑定将数据显示为 html 文本，这样
才能工作。区别可以看最后一张图

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

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

Answer 1

您可以在此处使用多种模式来 pre-process 您的数据。

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

VUEJS：是否可以 process/modify 在显示之前通过 v-for 检索数据？

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

css

text-align

vue.js

vue-component

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