Is it possible to change the text of a scrollspy dropdown to a default text when it is not actively tracking any items?

I am new to Vue and currently implementing Bootstrap Vue Scrollspy (view example here). My sticky dropdown is tracking all referenced content and updates with the current section in view.

You can check out my code sample here.

Is there a way to set the default text of the dropdown, like "Contents", when scrollspying happens, instead of needing a height property on #nav-scroller? I'm dealing with dynamic data so setting a fixed height is not ideal, plus it creates unwanted double scrollbars.

I've attempted to make the dropdown sticky using Stickybits (website here), but couldn't find an event feature that changes the dropdown text back to default when the position is no longer sticky.

Adding overflow hidden didn't solve the issue either. I prefer to avoid jQuery and looking for a solution. Any help would be appreciated. Thank you.

Answer №1

After some time understanding the criteria, it appears that you are looking for a way to customize the dropdown button text when no section is selected. I have streamlined the process by keeping it DRY:

  • I added an emptySectionMessage and a defaultDropdownText in the data section
  • I created a computed property called dropdownText which displays either the sectionTitle when scrollspy has a target or the defaultDropdownText if not.

Feel free to modify the data prop values according to your requirements.

Check out the functionality here: https://codesandbox.io/s/sweet-montalcini-bexqu?file=/src/App.vue

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JSON and AJAX to mine data from databases

I've been working on creating a basic "search" box using Javascript, AJAX, PHP, and JSON. I'm focusing on the "world" database that I downloaded from the MySQL website for this particular project. I've hit a roadblock when trying to retrieve ...

Mongoose search operation coming up with a blank array

Whenever I utilize $search in mongoose, it returns an empty array. Data Model const mongoose = require('mongoose'); const studentSchema = new mongoose.Schema({ name: { type: String }, }); studentSchema.index({ name: 'text' }); con ...

What is the best way to generate a list from a text file in javascript?

I have a document called department.txt which lists various departments: Chemistry Physics Mathematics Other I'm looking to generate a dropdown menu <select> in my HTML by importing this file. How can I achieve this using Javascript? There are ...

In Vue.js, is it possible to nest a <tr> tag inside another <tr> tag?

I've been working on a dynamic table in vue.js, using the code snippet below: <template> <tr class="left-align" v-for="(item,index) in itemList" :key="index.id"> <td>{{item.items}}</td> ...

Vue email validation is failing to return a valid email address

I'm relatively new to Vue and have implemented email validation using the reg expression in my Vue script data for this project. By utilizing console.log(this.reg.test(this.email)) and observing the output while users input their email, the validation ...

Is it possible to link to a .json file stored on my server and then create a template for it?

I have set up a Webserver on kasserver.com, and I have a PHP script that retrieves data from an API every 15 minutes and saves it on my Webserver. Now, I am looking to create a template for the saved JSON data, but I am having trouble accessing it locally. ...

TypeError thrown by Basic TypeScript Class

I'm encountering an issue where TypeScript is throwing a TypeError when trying to use the class Literal from file Classes.tsx in file App.tsx, even though they are in the same file. Strangely, everything works fine on typescriptlang.org/play. // Class ...

How can I ensure the keyboard does not cover the text input in React Native?

I am trying to figure out how to keep the keyboard from covering the text input field and instead have it appear below. Every time I type something, the keyboard obstructs my view of the text box content. Any help in solving this issue would be greatly a ...

Problem with character encoding in Node.js

I am encountering an issue while retrieving data from a request, as the formatting or encoding is not matching my requirements. Attempted to address this by setting the encoding with req.setEncoding('utf8') The expected string should appear as: ...

What are the steps to troubleshoot and fix the Internal Server Error on Next.Js?

I recently set up a new Next.js app using the command npx create-next-app. After that, I added Sass to my project with yarn add sass and proceeded to run it with yarn dev. To my surprise, I encountered multiple errors in both my terminal and on localhost. ...

Is there a way to remove the "next" button from the last page in a table?

I'm currently working on implementing pagination for my table. So far, I have successfully added both the "next" and "previous" buttons, with the "previous" button only appearing after the first page - which is correct. However, I am facing an issue w ...

How to retrieve an unknown JSON key in Vue.js when using v-for loop?

I have developed a code analysis tool and I am looking to display my JSON data in a Vue table. The challenge is that I need the JSON key, which represents the package/file name of the directory whose data I want to showcase. Below is an excerpt of the JSO ...

How do I set up middleware with async/await in NestJS?

I am currently integrating bull-arena into my NestJS application. export class AppModule { configure(consumer: MiddlewareConsumer) { const queues = this.createArenaQueues(); const arena = Arena({ queues }, { disableListen: true }); consumer. ...

The lifecycle of a React state in a filtering component

Seeking guidance on handling state updates in a component designed for filtering purposes (such as selecting dates, min/max values, etc). My current setup is as follows: onMinDateChange(minDate) { this.setState({minDate}); }, onMaxDateChange(maxDate) ...

Verify the presence of the promotion code and redirect accordingly

I have created a special promotion page that I want to restrict access to only users who have received a unique code from me via email. To achieve this, I have designed the following form: <form accept-charset="UTF-8" action="promotion.php" method="po ...

Issue encountered when importing async function: Invalid hook call. Hooks are designed to be called only within the body of a function component

All I desire is the ability to access logic from my geolocationApi file in my react-native components without using a hook. Instead, I prefer normal asynchronous functions. The geolocationApi file employs a custom hook for handling mobx state updates, whic ...

Do AngularJS routes allow the use of special characters in URLs?

Issue at hand: Every time I enter http://localhost:53379 in the browser, it redirects me to http://localhost:53379/#/. Why is the /#/ being added? angular .module('app', ['ngRoute', 'ngStorage']) .config([&apo ...

The Angular directive ng-model is not able to return a value

I'm currently troubleshooting an issue with the filters in an older project. Here's the HTML snippet: <input type="text" class="form-control" ng-model="FilterEventsEdit" ng-change="FilterEvents()" ...

Oops! Looks like the connection has been abruptly cut off from the ASYNC node

Is there a way to properly close an async connection once all data has been successfully entered? Despite attempting to end the connection outside of the loop, it seems that the structure is being finalized after the first INSERT operation CODE require( ...

Ensure that nested DTO objects are validated using class validator

Currently, I am utilizing the class validator to validate incoming data which comprises an array of objects that need validation individually. An issue that has arisen is that despite inputting everything correctly, I keep encountering errors. It appears ...