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

Inaccurate data saved to a cookie

I attempted to assign a string from PHP to a cookie and retrieve the value of that cookie using JavaScript. Take a look at my code snippet: <php $date=date('Y',time()); //assume it is 2017 setcookie("Year", $date, time() + 3600, "/"); ?> ...

Customize the List Box Appearance for a Specific HTML Item (Option)

I am working on achieving a specific behavior. When using a listBox (or comboBox), the first element (such as "choose one") should have a unique style. Here is an example of code to test: <style type="text/css"> .testX {font-style: italic;} </ ...

What is the best way to position this material-ui select list at the bottom of the input block for proper alignment?

My material-ui select build is working fine overall, but I'm looking to align the top line of the select list with the bottom line of the input block. Any ideas on how to achieve this? This is my code: const styles = theme => ({ formControl: { ...

The error message "Unexpected token var Node.js" means that there is a syntax error

Currently, I am dealing with Node.js and attempting to present a chart that is created from coordinates in a txt file uploaded to the server. However, I am facing an issue where everything works perfectly when I upload the file on the web page except for t ...

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?

I'm still learning about SVG and I'm trying to trigger an event that captures the click coordinates when clicking on the SVG. I have a few questions: Since I'm using Angular, I'm unsure if it's possible to keep my function in th ...

Storing user input from a dynamic form into a database using Kendo UI

I've successfully populated dynamic input form fields. However, I'm unsure how to save the data into a database using a put/post API since I have only used a get API so far. HTML code <div id="renderform" class="form horizontal-for ...

Discovering the value of an item when the editItem function is triggered in jsGrid

Within my jsGrid setup, I have invoked the editItem function in this manner: editItem: function(item) { var $row = this.rowByItem(item); if ($row.length) { console.log('$row: '+JSON ...

converting JSON to date format in angular

.controller('feedCtrl', ['$scope', '$http', function($scope, $http) { $http.get('items.json').then(function(response) { $scope.items = response.data; $scope.user = localStorage.getItem("glittrLoggedin"); ...

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any suggestions on how to accomplish that? ...

Calling Ajax in JavaScript

Trying to fetch a value in JavaScript using an Ajax Call, The code being used is as follows: <script> var value = $.ajax({ type:"GET", url:"get_result.php", data:"{'abc':" + $abc + "}", }); alert(val ...

Is there a similar feature to RxJs version 4's ofArrayChanges in RxJs version 5?

Currently utilizing Angular2 and attempting to monitor changes in an array. The issue lies with only having RxJs5 available, which appears to lack this specific functionality. ...

What is the process of manually loading webpack async chunks in the event that a dynamic import fails to load the file?

Async chunks in webpack can be created by using Dynamic Imports (for example: import('./ModuleA.js');). If the dynamic chunks fail to load, I want to retry loading them from another location. After grappling with the issue and delving into babel ...

Exploring Vue 3's Methods for Sending Data to Vuex Store within the Setup Phase

I'm currently working on a project that involves Vue 3 and Vuex. This is my first time using Vue 3, and I'm having trouble accessing Vuex within the Setup method of my Vue 3 project. Specifically, I have a feature object that is set by a Childco ...

What is the best way to locate the source of a custom Vue component?

Recently, I've been diving into a new codebase that contains components like <v-content>, <v-card>, and more. Does anyone know of a foolproof method to pinpoint exactly where these components are defined within the code? (I could easily l ...

npm-bundle encounters an issue with Error: ENOENT when it cannot find the file or directory specified as 'package.json'

npm-bundle is throwing an error that says Error: ENOENT: no such file or directory, open 'package.json' in my NodeJs project. It works fine if I manually create test.js and package.json, then run npm install followed by npm-bundle. However, when ...

The transparency feature using rgba is not supported in the Chrome browser for Android

Have you noticed the transparency effect in certain divs using the rgba CSS property? Strangely, Chrome on my ASUS tablet and Samsung S3 mini Galaxy smartphone does not seem to support this feature. Surprisingly, Internet Explorer does! Any insights on w ...

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

Expanding the visual in a spacious display with the help of ng-carousel from the Bootstrap framework

I have created a slider with multiple images on a website using Angular 4. The slider is displayed in a small area of the webpage and I would like to add a feature where the user can click on an image to view it in a larger screen or window. This could i ...

Having trouble with jest mocking a function - it's not functioning as expected

I decided to create a simple test using jest to simulate a date change function. Here is the code snippet: import React from 'react'; import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react' ...

Retrieve the value of a variable in a Bootstrap modal using Jade

I am looking to accomplish the following: On my Jade page, I have a for-loop that generates a list of items. Each item has some information displayed through Jade variables and a delete button. When this delete button is clicked, I want a Bootstrap Modal ...