VUEJS: Можно ли обрабатывать / изменять данные, полученные с помощью v-for, перед отображением? - PullRequest
Новая
       40

VUEJS: Можно ли обрабатывать / изменять данные, полученные с помощью v-for, перед отображением?

0 голосов
/ 03 июня 2019

Здравствуйте. Я чрезвычайно новичок в разработке веб-приложений / JavaScript в целом.Только давал мне курсы ускоренного обучения из видео udemy за последние 4 месяца.

Для моего веб-приложения я получаю данные из базы данных через серверную часть сервера с помощью 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 .Я также хотел оставить пробел таким, каким он был введен пользователем, используя пробел: предварительная упаковка .

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

Нопроблема заключается в том, что эти два стиля не работают вместе.Как видно на рисунке ниже, если я использую выравнивание само по себе, оно ведет себя нормально (за исключением того, что пробелы теряются). Однако, если я объединю оба text-align:justify и пробел: предварительная перенос, текст в конце выравнивается с интервалом, но выравнивается странным образом.

(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

С этим моим дисплеем больше не требуется стиль "white-space: pre-wrap". Однако, поскольку я ранее использовал интерполяцию строки дляДля отображения моих данных теги
были обработаны как обычный текст.

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

Мне пришлось изменить теги, чтобы использовать привязку v-html для отображения данных в виде htmltext, чтобы
сработает. Разницу можно увидеть на последнем рисунке.

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

Спасибо за помощь в этом, так как я очень новичок в javascript.

1 Ответ

3 голосов
/ 03 июня 2019

Существует несколько шаблонов, которые вы можете использовать здесь для предварительной обработки ваших данных.

  • Обработка ваших данных в функции then, которую вы создали
  • Обертывание данныхв функциях внутри блоков {{ ... }} в шаблоне
  • Создайте компонент, который используется в качестве элемента, который повторяется в цикле v-for, в котором отображается вычисленное значение
  • Используйте вычисленное значение какисходный массив директивы v-for в основном шаблоне.Это часто делается с использованием функции обработки, сопоставленной с исходными данными, как в log.map( data => data.logId.jobPerformed.trim()
...