VueJS: выделение строки таблицы при загрузке - PullRequest
Новая
       38

VueJS: выделение строки таблицы при загрузке

0 голосов
/ 18 апреля 2019

У меня есть таблица (из каркаса элементов) со списком вопросов внутри.Я могу выбрать один, чтобы изменить его, сделать свое дело, и после того, как я подтвердлю, я бы хотел, чтобы на странице прокрутился измененный вопрос. 

<template>
    <div>
        <el-table :data="list">
            <el-table-column :label="$t('label')" width="300">
                <template slot-scope="scope">
                    <span :ref="list[scope.$index].id">{{ list[scope.$index].label }}</span>
                </template>
            </el-table-column>

Вот как я управляю ссылкой каждого вопроса, чтобы он был уникальным

и в моей <script> части: document.getElementById(this.$route.params.questionId).scrollIntoView();

Я отправляю идентификатор в качестве параметра в моем URL и получаю его на моей странице списка просто отлично.Но с 

console.log("Id : ", this.$route.params.questionId, this.$refs[this.$route.params.questionId])
document.getElementById(this.$route.params.questionId).scrollIntoView();

Идентификатор вопроса в порядке, но остальное не определено.

Если я попытаюсь войти в систему this.refs, я получу такие вещи , как этот

Как мне заставить его работать?

Решения, которые я пробовал:

  • Добавление: this.$refs[this.$route.params.questionId].scrollIntoView() в mountedраздел., Я получаю TypeError: "_this.$refs[_this.$route.params.questionId] is undefined"
  • добавляя вопросId вручную, как this.$refs(questionId).scrollIntoView(), та же ошибка
  • Делая console.log из this.$route.params.questionId и this.$refs, я получаю идентификатор вопроса и refs
  • Попробовал (все еще в смонтированном состоянии): 
this.$nextTick(() => {
      this.$refs[this.$route.params.questionId].scrollIntoView()
});

все еще не определено

Редактировать: Добавлен скриншот журнала

1 Ответ

1 голос
/ 18 апреля 2019

Я понял, в чем проблема.

Я пытался сделать это в разделе mounted, похоже, что страница не была отрисована, и поэтому this.$refs[this.$route.params.questionId].scrollIntoView() не может работать (таким образом, undefined результатов, которые я получил)

Решение:

В части <script> я добавил 

updated() {
    if(this.scrollOnLoad && this.$route.params.questionId){
        this.scroll();
        this.scrollOnLoad = false;
    }
},

, что происходит, когда конченная часть заканчивается, как показано на этой странице .

ВНИМАНИЕ * * 1023 Update активируется всякий раз, когда вы выполняете действие, например, щелкаете в TextInput (как в моем случае). Я исправил это с помощью логического значения в разделе data (обновил код выше, чтобы соответствовать решению)

...