Is the Vue-portal enabled conditionally?

I am looking to include some additional information in the navbar (parent component) using Vue Portal.

So, within a component, I can use the following code:

<portal to="navbar">
   <b-button>Some option</b-button>
</portal>

This means that in the Navbar component, I have:

<portal-target name="navbar"></portal-target>

However, I want to insert a separator in this navbar only if the portal is enabled:

<b-nav-text v-if="$portal.navbar.enabled">|</b-nav-text> 
<portal-target name="navbar"></portal-target>

Unfortunately, the $portal prototype is not available. Is there an alternative solution?

javascriptvue.jsvue-portal

Answer №1

Achieving this effect using CSS is quite simple.

.box {
  position: relative;
  color: #333;
}
.box:after {
  display: block;
  position: absolute;
  right: 0 // or left, depending on your layout.
  content: "|" // you can also use content: "" with additional styling
  top: 0; // adjust as needed
  bottom: 0;  // adjust as needed
  width: 1px;  // adjust as needed
  background: currentColor;
}

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

Node.js may not always save Winston log files when using process.exit()

I'm struggling to grasp a particular concept... when I use process.exit() in a program that logs events to both the console and a file, all the log events are displayed on the console as expected, but only the first one (or none at all) is actually sa ...

javascriptnode.jsasynchronousprocesswinston

What is the best way to distinguish between node modules and async chunks in webpack configuration?

I have a webpack configuration where the vendor chunk is separated from the main bundle. However, I am also using lazy loading on routes and I need to separate the rest of the node modules from those lazy loading chunks as well. I attempted to do this with ...

webpackvue.jsvuejs2lazy-loadingwebpack-2

Utilize Node.js to traverse an array of objects and extract particular values to create a separate array

Looking to extract scores from the ratings array for each object and compile them into a new array. For instance, for post with post_id: "5e1223c2383ce049d8b32eb5", the associated array should be [1, 4]. And for the post with post_id "5e146b993dde720850c1 ...

javascriptarraysnode.jssorting

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

javascriptcsscss-position

What is preventing the click event on this dynamically generated checkbox using jQuery?

Check out the jsFiddle Currently, I am utilizing a jQuery plugin that enables users to draw boxes within a designated area. Using jQuery, I have incorporated a checkbox (alongside a dropdown list) into the box that appears when the user releases the mouse ...

javascriptjqueryjquery-uicheckbox

Angular 2 template is nowhere to be found

As a newcomer to Angular 2, I am currently developing an app where I have successfully completed the Root component containing a navigation bar and footer. However, as I delve into working on the homepage module, I encountered an error. [Error] Unhandle ...

javascriptangular

Transfering information to handlebars in node.js

Being a beginner in node.js, I am currently working on making a get request in my router (index.js). After successfully obtaining the desired result (verified by logging it in console.log), I proceed to parse it into a JSON object and pass it to a render f ...

javascriptjsonnode.js

What are some ways to maintain consistent audio levels on a jquery volume slider?

My html5 webpage features a slider and an audio track, but I am not using the sound tag property controls="controls". I want the slider to control the volume of the audio file. When I include the following code in the body tags, everything works perfectly: ...

javascriptjqueryhtml

Tips for refreshing the Vuex store to accommodate a new message within a messageSet

I've been working on integrating vue-socket.io into a chat application. I managed to set up the socket for creating rooms, but now I'm facing the challenge of displaying messages between chats and updating the Vuex store to show messages as I swi ...

javascriptvue.jsvuex

Identify when a mouse hovers within 10 pixels of a div using jQuery

Is it possible to detect when a user hovers over a specific area within a div using JavaScript or jQuery, without adding any additional tags? -------------------------------- -------------------------------- -------------------------------- -------- ...

javascriptjqueryhtmlcss

Methods for hiding and showing elements within an ngFor iteration?

I am working on an ngFor loop to display content in a single line, with the option to expand the card when clicked. The goal is to only show the first three items initially and hide the rest until the "show more" button is clicked. let fruits = [apple, o ...

javascriptangular

Include the referrer header when using the chrome.downloads API

I have been working on developing an extension that replicates the Ctrl+Click to save image functionality from Opera 12. In my extension, I am utilizing chrome.downloads.download() in the background script to trigger downloads, while a content script is re ...

javascriptgoogle-chrome-extension

Can you point me to the source of definition for Vue 2's ComponentDefinition and ComponentConstructor types?

I am struggling to add a dynamic Vue 2 component with correct typing in TypeScript. The documentation clearly mentions that the is attribute accepts values of type string | ComponentDefinition | ComponentConstructor, but I cannot locate these custom types ...

typescriptvue.js

Error with Laravel and Vue template integration

I have recently started using Vue in Laravel 5.3 and I am able to retrieve data through a jQuery AJAX request within Vue. However, I am facing difficulties with displaying the data. Below is my current script in the view: <li> <!-- inner men ...

javascriptphpajaxlaravel-5vue.js

Can anyone recommend a drag-and-drop feature in Javascript that functions seamlessly on both iPad and PC devices?

Can anyone recommend a JavaScript plugin that allows for drag and drop functionality on both touch and mouse enabled devices, including IOS, Android, PC, and Mac? For touch-enabled devices, I found an example here: And for mouse-enabled devices, there is ...

javascriptjqueryandroidiosjquery-ui

What strategies can I implement to prevent position: absolute from obscuring my content?

I am currently experiencing an issue with my Google Map loading within a tab. The container div has the position set to absolute. Although the map displays correctly, I am encountering a problem where it covers any content I try to place underneath it. My ...

javascriptjqueryhtmlcss

Leveraging the outcome of a Promise within webpack's configuration file

Currently, I am facing a challenge in accessing a Promise which is essentially an array of file paths created within recursive.js. This script navigates through my directories and organizes my stylesheets. The main issue arises when trying to utilize this ...

javascriptwebpackes6-promise

Dynamically insert letters into each row as the HTML table increases

How can I display dynamically increasing alphabets in a newly generated cell on the left side of each row, based on the option selected in a dropdown list? These alphabets will serve as bullet points or serial numbers for the text boxes in each row. View ...

javascriptjquery

Steps to retrieve a value from a promise function

My current challenge involves a function that verifies whether a device is online. Take a look at the code snippet below. const ping = require('ping'); export function checkDeviceStatus(device) { try { const hosts = [device]; let resul ...

javascriptnode.jspromiseasync-await

Creating a basic JSON array using the push method

When adding comments to a blog post using the line: blogpost.comments.push({ username: "fred", comment: "Great"}); The JSON structure of the comments section will look like this: "comments":[{"0":{"username":"jim","comment":"Good",},"1":{"username":"fre ...

javascriptarraysjsonpush