VUEJS：是否可以在显示之前处理/修改通过 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。我还想通过使用 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 块中的对象变量，并将所有 \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()