Exploring Interactive Designs with Vue.js

In order to dynamically construct a series of CSS style classes based on the toolName property in the JSON data using Vue 2, I tried to use a computed property to bind them to the existing span with a class of panel-icon. However, when attempting to save the results of the for loop to a variable and return it, only one result is returned instead of the four that were expected. The goal is to have the CSS class match the tool name displayed in the v-for loop.

HTML:

<div class="container" id="lab">
    <a class="panel-block" v-for="tool in tools">
        <span class="panel-icon" :class="style">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        {{ tool.toolName }}
    </a>
</div>

CSS:

.icon--bulma {
    color: hsl(171, 100%, 41%);
}

.icon--jgthms {
    color: hsl(204, 86%, 53%);
}

.icon--marksheet {
    color: hsl(48, 100%, 67%);
}

.icon--minireset {
    color: hsl(348, 100%, 61%);
}

Vue.js:

new Vue({
    el: '#lab',
    data: {
        tools: [
            {
                toolName: 'bulma'
            },
            {
                toolName: 'marksheet'
            },
            {
                toolName: 'minireset'
            },
            {
                toolName: 'jgthms'
            }
        ]
    },
    computed: {
        style: function () {
            var toolsList = this.tools;
            var toolNameStyle = '';

            for (var i = 0; i < toolsList.length; i++) {
                toolNameStyle = 'icon--' + toolsList[i].toolName;
                console.log('toolNameStyle: ' + toolNameStyle);

                return toolNameStyle;
            }
        }
    }
})

Answer №1

You can achieve the desired result without using a computed property. Just use the following code:

<span :class="'panel-icon icon--' + tool.toolName">

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

Using TypeScript generics to add constraints to function parameters within an object

My Goal: Imagine a configuration with types structured like this: type ExmapleConfig = { A: { Component: (props: { type: "a"; a: number; b: number }) => null }; B: { Component: (props: { type: "b"; a: string; c: number }) =& ...

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

Troubleshooting JavaScript in Internet Explorer 9

Currently, I am encountering an issue while attempting to debug JavaScript .js files in my Solution using Visual Studio 2010 and IE 9. Despite placing breakpoints in the files, I am unable to debug successfully. I have attempted various troubleshooting ste ...

Can you help me convert this Mongoose code to use promises?

Using Mongoose's built-in promise support, I aim to streamline the process of a user sending a friend request to another user. However, even with careful error handling and sequencing in place, I find myself grappling with a slightly condensed pyramid ...

What is the advantage of using event.target over directly referencing the element in eventListeners?

Suppose there are several buttons in an HTML file and the following code is executed: const buttons = document.querySelectorAll('button'); buttons.forEach((btn) => { btn.addEventListener('click', (e) => { console.log(btn.te ...

Encountering a [$injector:modulerr] error while attempting to include modules in ZURB Foundation for Apps

I am currently working on a project that involves specific authentication which is functioning well in Ionic. My task now is to incorporate the same authentication system into the admin panel exclusively for web devices. I have already completed the instal ...

The custom server was functioning properly, but as soon as I altered the file directory, an error occurred on Next.js

After creating "create-next-app," I successfully set up the folder structure as follows: +client2 --.next --node_modules --public --... --server.js However, when I move my "server.js" file to a different location: +client2 --.next --no ...

What is the best way to create router links on the fly in Vue.js?

I am currently exploring how to achieve the following in Vue.js <table> <tr v-for="item in messages"> <td><router-link to="'/user/' + item.id">{{ item.name }}</router-link></td> </tr> < ...

Updating a global variable in Angular after making an HTTP call

I'm facing a challenge where I have a global variable that needs to be updated after an HTTP GET call. Once updated, I then need to pass this updated variable to another function. I'm struggling to figure out the best approach for achieving this. ...

Is it possible to prevent the text from appearing in the text box when a button is

I have successfully implemented a feature where clicking on the button (click on me) in HTML displays a textbox along with another button (show) on the screen. The text written in the textbox is visible when the show button is clicked. However, after the i ...

Retrieve a collection of JSON files using a single function

The format of JSON links is as follows: www.example.com/link-number-end-of-link.com.json I need to retrieve multiple JSON link files where the only variable changing is the number in the link. For example, it could range from 10 to 40, with the first ...

jQuery and Bootstrap collide

Here is my jQuery code that toggles visibility of different divs based on a click event: $(function () { $(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide(); $("a").bind("click", function () { $(".conor-div, . ...

Tips for sending an input file to an input file multiple times

As a developer, I am facing a challenge with a file input on my webpage. The client can add an image using this input, which then creates an img element through the DOM. However, I have only one file input and need to send multiple images to a file.php i ...

What could be causing the TypeError in my pg-query result?

In the process of creating a node function to add a user to a PostgreSQL database, I am utilizing node.js, pg, and pg-query for communication between the application and the database. Prior to inserting a new record, I am attempting to verify that the ema ...

Having trouble making event listeners work with React useState in Next.js?

I'm currently working on a webpage where I want to have a fixed hamburger icon in the top-right corner that, when clicked, opens a navbar. The navbar should close if the user clicks outside of it, and the hamburger icon should reappear. Since Next.js ...

Generating a multidimensional associative array based on user inputs from a form

What is the best way to transform form input data into a multidimensional associative array? This is how the form appears: <div id="items"> <h4>Engraving Text</h4> <div class="item" data-position="1"> <h4 id="en ...

Is it considered good or bad practice to use plain JavaScript objects in an AngularJS application?

Imagine needing a custom object that doesn't rely on AngularJS (such as a specific collection with unique functionalities). You could create it independently of AngularJS and simply use it in services/controllers. Alternatively, you could design it a ...

Develop a video in mp4 format using Node.js and ffmpeg by combining two or more jpg images

I am currently working on a video animator project where I generate .jpg images from an html canvas tag and then use these images as frames for the video. The tool I am using for video generation is ffmpeg. Successful with Single Image const ffmpeg = req ...

The message will not appear to indicate whether the room is valid or not

Take a look at this create_session.php application: Application Upon opening the application, you will encounter a CourseId textbox. Enter 'info101' in the textbox and click submit. You should see all the features listed below. Without entering ...

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...