Utilizing Vue.js to incorporate the isActive property to the class name within a v-for loop, along with implementing dynamic class names

I am currently using a loop to iterate through some data in my store.js file, and everything is functioning as expected. However, I would like to add a condition to check if the Vue instance is active before applying a specific class to the polygon element. I am struggling with the syntax of this conditional statement without affecting note.content_type, which determines the dynamic class name.

Once I am able to set { active: isActive } on this element, I believe I will be able to update my data accordingly based on a tap or click event.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="800" id="space" ref="sheets">
          <g
            v-for="(note, index) in notes"
            :key="'note'+index"
            :transform="`translate(${note.xpos}, ${note.ypos})`"
            class="draggable"
          >

            <polygon
              v-if="note.content_type == 'link'"
              points="9.500000000000002,16.454482671904334 -19,2.326828918379971e-15 9.499999999999986,-16.45448267190434"
              fill="#989898"
              :class="note.content_type"
              :id="note.id"
            />

          </g>

Thank you once again for your help.

Answer №1

Apologies for the confusion - the updated version uses array syntax instead of an object:

<polygon
  v-if="note.content_type == 'link'"
  points="9.500000000000002,16.454482671904334 -19,2.326828918379971e-15 9.499999999999986,-16.45448267190434"
  fill="#989898"
  :class="[ note.content_type, isActive ? 'active' : '']"
  :id="note.id"
/>

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

Display a single video on an HTML page in sequential order

My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...

Error: missing semicolon prior to the statement

I am looking to create a Java web application that includes a JSP page. However, when I load the page, I encounter the following error: SyntaxError: missing ; before statement The code for my JSP page is as follows: <%@ page language="java" contentTy ...

Tips for implementing a multi-layered accumulation system with the reduce function

Consider the following scenario: const elements = [ { fieldA: true }, { fieldB: true }, { fieldA: true, fieldB: true }, { fieldB: true }, { fieldB: true }, ]; const [withFieldA, withoutFieldA] = elements.reduce( (acc, entry) => ...

Utilizing Google Geochart for displaying multiple data values within the same country from JSON dataset

I am facing an issue where only the last row is being displayed in a Google Geochart for each country, despite trying to fetch data from my database via JSON. The problem is that only 'Supplier 2' is showing up, as highlighted below. I have gone ...

Making adjustments to a row in the free jqGrid is a breeze with the ability

Using free jqGrid 4.12.1, I aim to incorporate functionality for adding, editing, and deleting rows in the grid with server-side calls for each operation. Below is the implementation of editurl and 'actions' formatter, { name: "actions", wi ...

Mistakes in the Horizontal Alignment of Bootstrap Forms

I'm having trouble aligning my textboxes with my form in Bootstrap within ASP.NET MVC 4. Despite using the form-horizontal div, my elements are displaying misaligned. How can I ensure that the elements align properly with the labels? <div clas ...

Sending data through ajax to PHP on separate pages is a common practice

Here is where I choose my preferred option Company Name<br /> <select id="company" name="selected"> <option value="">Option A</option> <option value="">Option B</option> </select> When I click this, a mo ...

Encountering an error while setting up the object spread operator Babel plugin for ES201

Exploring the possibilities of the new ES2018 spread operator for objects led me to discovering a promising NPM package: babel-plugin-transform-object-rest-spread Here's a glimpse of my package.json: // Scripts section "scripts": { "dev": " ...

Having issues with AngularJS rzslider failing to dispatch updated slider value

Hello, I am currently using the rzmodule/rzslider in AngularJS. However, after changing the slider to a specific range, the ng-modal is not returning the updated value. It keeps returning the initial value of 10000 that was configured initially. $scope.sl ...

Tips for implementing <select> with vee-validate?

I am struggling to integrate my form with vee-validate. According to the documentation, it recommends using <Field />, but I am having difficulty implementing it in a Select form. How can I accomplish this? Thank you. <Form @submit="submit&q ...

changing the breadcrumb item to a dropdown item in a dynamic way

Hey there, I'm currently working on creating a breadcrumb item using Angular. Here is what I have so far: https://i.stack.imgur.com/zt5yX.png I decided to add a dropdown for the breadcrumb item, but I'm facing a challenge: I want to be able to ...

JavaScript implementation causing Safari to display a blank page

After diving into JavaScript recently, I encountered some issues right away. I've been attempting to run a simple "Hello World" program but no success so far. Each time I open the html file in Safari, it displays only a blank page. Despite having enab ...

JavaScript Transcriber

Hey there! I'm currently attempting to compile some JavaScript code that I have written in a textarea and get the output of this code. I've tried using the eval() method, but unfortunately, I haven't been able to get the complete response. C ...

What is the best way to reference a const from a different class in React?

I'm relatively new to ReactJS, specifically using NextJS. In my project, I have two files - index.js and welcome.js In index.js, I've added Welcome as a component, along with a const called hideWelcome to hide the component and perform some acti ...

How can I verify in Javascript that a string contains at least one set of letters and numbers using regex?

I am currently trying to decipher the appropriate regex for identifying a pattern similar to 2d1h30m10s, accepting any valid variation such as 1h, 1h30m, 30m, 10s, or any combination of these. Could regex be the right solution in this scenario? I have bee ...

Functionality of the button disabled in Firefox, despite working perfectly in Chrome

I have been developing a ReactJS application that is now live. Take a look at the deployed version to understand the issue I am facing. In Firefox, the Login button in the Inventory Login section doesn't seem to be working as expected. Despite having ...

Utilizing vue-router-next without a bundler: A step-by-step guide

Previously, the vue-router plugin would automatically mount to the global application instance like this: if (inBrowser && window.Vue) { window.Vue.use(VueRouter); } In Vue 3, this functionality has been restricted. So, how can I access VueRoute ...

Angular ng-bind is incorrectly displaying the value as 'object' instead of the intended value

I am working on an Angular app where I am retrieving data from a service in the following manner: angular.module('jsonService', ['ngResource']) .factory('MyService',function($http) { return { getItems: ...

Bootswatch is causing the Bootstrap tooltip feature to malfunction

Could someone help me figure out why my tooltip isn't functioning properly? The HTML Code in Question: <div class="form-check"> <label class="form-check-label" > <input type="radio" class="form-check-input" name= ...

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...