Есть ли способ обновить текст выпадающего списка прокрутки, когда он не шпионит за текстом по умолчанию?

Question

Я новичок в Vue и использую Bootstrap Vue Scrollspy (https://bootstrap-vue.org/docs/directives/scrollspy#example -using-navs ). Мой выпадающий список липкий и следит за всем ссылочным контентом. Липкий выпадающий список содержит текст, который обновляется с учетом текущего раздела.

Это похоже на мой код: https://codesandbox.io/s/festive-tree-1w3hx?file= / src / App. vue

Можно ли каким-либо образом установить для текста моего раскрывающегося списка текст по умолчанию, например, по ссылке выше «Содержание»? Чтобы каждый раз, когда прокрутка выполнялась, он просто превращал текст раскрывающегося списка в текст по умолчанию? Что мне не нравится в этом подходе, так это то, что мне нужно свойство высоты в #nav-scroller, и, поскольку я имею дело с динамическими данными c, я не рассматриваю это как вариант для меня. Двойные полосы прокрутки - это то, чего я не хочу.

Я пытался сделать раскрывающийся список в моем коде с помощью Stickybits (https://dollarshaveclub.github.io/stickybits/), я также пытался проверить, есть ли у них функция, позволяющая мне запускать событие, когда позиция не является липкой, тогда текст раскрывающегося списка меняется на текст по умолчанию, но из моего исследования я не думаю, что они это делают?

Кроме того, я попытался сделать скрытое переполнение, но это не решить вопрос.

Я пытаюсь найти способ, которым это возможно без jQuery. Был бы признателен за помощь, спасибо.

Answer 1

Мне потребовалось немного, чтобы понять требования, но вам, кажется, нужен текст выпадающего меню, когда не выбран раздел. Чтобы упростить управление, я сделал это полностью DRY:

• Я поместил emptySectionMessage и defaultDropdownText в data
• Я создал dropdownText вычисляемое свойство, которое возвращает sectionTitle, когда у scrollspy есть цель, или defaultDropdownText в противном случае.

Не стесняйтесь изменять значения реквизитов данных на все, что вам нужно.

Смотрите, как это работает здесь: https://codesandbox.io/s/sweet-montalcini-bexqu?file= / src / App. vue