Creating custom folding icons for the Vue Treeselect Component: A step-by-step guide

I am currently working on a Vue TreeSelect component within my Nuxt application.

However, I am facing an issue with customizing the folding icons in the Treeselect component:

https://i.sstatic.net/46XvO.png

Is there a way to achieve this? I attempted to adjust the CSS classes and replace the SVG DOM child with a custom one created using JavaScript. But it seems like this may not be the most effective approach...

Edit:

Here is the DOM structure for the first icon:

https://i.sstatic.net/AQcfy.png

It appears that simply changing the CSS class won't suffice. I need to alter the entire SVG node instead.

javascriptvue.jsvuejs2nuxt.jsvue-treeselect

Answer №1

In order to address my issue partially, I found it necessary to swap out the <svg></svg> node for a <span></span> node:

// Creating the new span node
const plusIcon = document.createElement("span");
plusIcon.setAttribute("class", "vue-treeselect__option-arrow");

Following that, I had to locate all the various nodes with the class vue-treeselect__option-arrow:

const treeOptions = treeMenu.getElementsByClassName("vue-treeselect__option-arrow--rotated");

// Substituting all svg elements with span elements
Array.from(treeOptions).forEach((treeOption) => {
  if (!treeOption.getAttribute("class").includes("--rotate")) {
    treeOptions.parentElement.replaceChild(
      plusIcon.cloneNode(true), treeOptions
    );
  }
});

Additionally, within the css section, I made adjustments to the vue-treeselect__option-arrow class:

.vue-treeselect__option-arrow {
  content: url(path/to/my/svg);
}

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

What is the significance of the error message '[WDS] Disconnected!' in the context of using webpack and Vue.js?

Currently, I am engaged in a Django project that utilizes Vue.js for the frontend. Whenever I refresh the page, I encounter the "[WDS] Disconnected!" error. Despite the website's full functionality and absence of issues, this error appears every time ...

javascriptnode.jsvue.jswebpackwebpack-dev-server

Create an animated A-frame box that moves randomly within a designated space

Looking to add some movement to my A-frame scene with a random box animation. I want to utilize the animation property to make an entity move randomly within a specified area. The goal is to have a box animate to a random position within coordinates rang ...

javascriptjquerythree.jsaframewebvr

Using Express.js to Query a PostgreSQL Database via URL Parameters

Trying to retrieve specific information from my database via URL query is proving tricky. Currently, the response just displays all individuals in the database. exports.getPersonByName = async (req, res) => { const query = req.query.q try{ const per ...

javascriptsqlpostgresqlexpress

Ways to show a div element within an input field?

I want to incorporate tags similar to stackoverflow on my website. Users will be able to create tags for filtering results, searching, showcasing expertise, and more. I have managed to create tags, but I am struggling to display them inside an input box l ...

javascriptjquerycss

Is it necessary to use the prefix meteor when incorporating npm with Meteor?

When I am working on Meteor 1.3 projects, is it necessary to always prepend meteor before npm? The Meteor documentation and code examples seem to offer different approaches. I believe that the recommended practice is: $ meteor npm install --save some-pac ...

javascriptnode.jsmeteornpm

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...

javascriptreactjstypescript

accessing elements in a loop in vuejs

I am trying to create a rating system using Vue.js and the v-for directive. Here is the code I have: <div class="rating-container"> <input type="radio" name="star" value="5" id="star-5"> <label class="star-radio" for="star-5">5&l ...

vue.jsv-for

Discover local points of interest with the Google Places API integration on your WordPress site through PHP programming

$(document).ready(function() { var image_src = "images/"; var map; var infowindow; var bounds = new google.maps.LatLngBounds(); var PlaceArray = ["restaurant", "cafe", "bar", "grocery_or_supermarket", "parks", "school", "shopping_mall", "movie_t ...

javascriptjquerywordpressgoogle-maps

Checking the size of uploaded files for validation

Validation can be a tricky issue, especially when using PHP. While PHP has all the necessary functions to make it work, it uploads the file to a temporary location first and then checks, causing delays. If someone uploads a large 100mb file, they have to w ...

phpjavascriptvalidationuploadsize

Issue with applying value changes in Timeout on Angular Material components

I'm currently experimenting with Angular, and I seem to be struggling with displaying a fake progress bar using the "angular/material/progress-bar" component. (https://material.angular.io/components/progress-bar/) In my "app.component.html", I have m ...

javascripthtmlangulartypescript

Node.js is throwing a 'Callback is already called' error with no other callbacks present

I've been scouring forums all day, but I can't seem to solve my problem. I'm using NodeJS and async.waterfall to make API requests. The same structure works for me, but not with this specific one; async.waterfall([ function (call ...

javascriptnode.jsrequestasynccallback

Interacting with YouTube Data API without requiring user input

I'm currently developing a music website that enables users to create YouTube playlists. Initially, I experimented with JavaScript: https://developers.google.com/youtube/v3/code_samples/javascript The procedure involves an initial authorization ste ...

javascriptphpyoutubeyoutube-apiyoutube-data-api

Is it possible to invoke a computed property within the props of a child component in Vue.js?

In the context of my child and parent components, I have a boolean prop in the child component with a default value of false. When calling the child component within the parent component and setting it based on a computed function that returns a boolean va ...

javascriptvue.jsvuejs2vue-props

Failure to properly evaluate the ID string in Express

I'm currently developing an express app and I am facing an issue with adding a friends list on a user's profile page. The user has an array of friends, which is essentially an ID pointing to another user. However, when comparing this ID to the us ...

javascripthtmlnode.jsexpressejs

Create a Vue component that integrates with "unpkg"

I am trying to publish my component on unpkg.com. While it is currently available there, it seems to not be working as expected. I have attempted to use the same UMD build for unpkg as I do for my npm build, but it appears that a specific build may be need ...

javascriptvue.jsnpmbuildcomponents

Having difficulty breaking down values from an object

Attempting to destructure the data object using Next.js on the client side Upon logging the data object, I receive the following: requestId: '1660672989767.IZxP9g', confidence: {…}, meta: {…}, visitorFound: true, visitorId: 'X9uY7PQTANO ...

javascriptobjectnext.jsdestructuring

grid causing images to display incorrectly in incorrect positions

My project consists of 3 component files and a CSS file, but I am facing an issue where the Tiles are slightly off in their positioning towards the top left corner. Although no errors are being thrown, upon using the view grid feature in Firefox, it is ev ...

javascriptcssreactjscreate-react-app

Submitting an HTML form to trigger a PHP function through AJAX

I am currently working on a task that involves POSTing an email address entered in an HTML form to a PHP script for storage in a database. The script should also handle error messages if the user inputs an invalid email address. I want to make this process ...

phpjavascripthtmlajaxforms

Creating dynamic HTML elements by utilizing both jQuery and native JavaScript within the DOM

I have an old application that I'm revamping, and instead of using the node's id, I want to apply the DOM structure to its class. Here is a snippet of my code where I am attempting to combine jQuery (selecting the node by its class) with the exi ...

javascriptjquerydom

What is the method for transmitting a concealed attribute "dragable" to my component?

Currently, I have successfully integrated a here map into my project, but I am now tackling the challenge of adding draggable markers to this map. To achieve this, I am utilizing a custom package/module developed by my company. This package is designed to ...

javascriptreactjstypescripthere-api