Ensure that the v-for attribute has an increased value

Is there a way to have an incremented value in this code snippet?

:data-value="Math.round(elecs[index].obtenus/elecs[index].maxsiege*100)

Here is my attempt at iteration :

:data-value="Math.round(result += elecs[index].obtenus/elecs[index].maxsiege*100)

Any help or suggestions would be appreciated!

Additionally :

<ul class="pie-wrapper" >
          <li v-for="(elec, index)  in elecs" :key="index" v-if="elecs[index].obtenus != 0" class="arc" :data-value="Math.round(elecs[index].obtenus/elecs[index].maxsiege*100)">
            <b>{{ elecs[index].Sigle }} </b>
            <span>{{elecs[index].obtenus}}/{{elecs[index].maxsiege}}</span>
          </li>
      </ul>

script :

 export default {
async asyncData({ params }) {
  ... json
  return {
    ...json
  }
},
methods: {
  toCurrencyString(number){
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  }
}

}

Answer №1

Success at last! Kudos to Max Sinev for steering me in the right direction!

methods: {
  toCurrencyString(number){
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  },
  tottest(elecs, index){
    return result += Math.round(elecs[index].obtenus/elecs[index].maxsiege*100);
  }
}

And within my template :

      <ul class="pie-wrapper" >
          <li v-for="(elec, index)  in elecs" :key="index" v-if="elecs[index].obtenus != 0" class="arc" :data-value="tottest(elecs, index)">
          </li>
      </ul>

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

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

Getting the value of a CSS variable under <script> in Vue.js

I am working on implementing a Doughnut chart using chartJs in my application. However, I want to set the color of the chart within the <script> tag and retrieve the color from theme/variables.css. In the current code snippet below, there is a hardc ...

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

What is the TypeScript syntax for indicating multiple generic types for a variable?

Currently working on transitioning one of my projects from JavaScript to TypeScript, however I've hit a roadblock when it comes to type annotation. I have an interface called Serializer and a class that merges these interfaces as shown below: interfa ...

Exploring ways to track file upload progress with the Fetch API in ReactJS or NextJS

Currently, I am utilizing Nextjs for constructing a full-stack application. Specifically, I am focusing on the admin CMS part and attempting to implement file uploads such as images. Referring to this modified version of the code from this post. The upload ...

Is it possible to use abbreviations instead of full names for object properties in a JSON string?

I'm looking for a way to efficiently convert large and repetitive javascript objects into JSON strings. With the abundance of repeating property names in these objects, I want to streamline the process by replacing those names with predefined abbrevia ...

Is there a way to add an entire array of child nodes to a parent node in a single operation using JavaScript?

Is there a quick way in JavaScript to attach an array of child nodes to a parent node all at once? I'm looking for a method that will avoid triggering unnecessary repaints. So far, I attempted using parent.appendChild(arrayOfNodes), but it resulted ...

Saving HTML content from a textarea using AngularJS

Here is the custom HTML I am working with: <div ng-if="!item.edit> <div class='door-description' ng-bind-html="item.Description"></div> <div class='door-softvalues' ng-bind ...

Having difficulties with long JSON strings? jQuery's JSON.parse might not be the solution for you

As I work on my phonegap app, I encounter an issue with parsing a large JSON string downloaded from a server. Initially, downloading and reading the text data works well using FileReader, but when it comes to parsing the JSON, problems arise. For instance ...

Error encountered with special character encoding in ajax request

When attempting to retrieve a JSON file with special characters through an AJAX call, some of the characters are being converted to in the success callback. The content-type has been set as: application/json;charset=UTF-8. Here is the content of the m ...

Link dynamic Vue image source from node_modules

I am currently working on a Vue component that displays an SVG image from my node modules based on a specific image name or key provided by an API. If I directly specify the source image like ~cryptocurrency-icons/svg/color/eur.svg, it loads without any i ...

Implementing Next.js with Firebase's onAuthStateChanged method allows seamless user

const checkUserAuth = () => { const [user, setUser] = useState(''); useEffect(() => { auth.onAuthStateChanged(function handleAuth(user) { if (user) { setUser(user); } else { setUser(null); } }) ...

The package.json file is missing the "exports" main, causing the Error [ERR_PACKAGE_PATH_NOT_EXPORTED] to be displayed

Can anyone help me resolve the 'Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in package.json' issue? I've been struggling to fix it despite receiving assistance. The problem is quite baffling and the more I dwel ...

Is it possible for a JSON schema to require that a number array property must have its elements in ascending order?

Imagine having a property schema like this: "Points": { "type": "array", "items": { "type": "number", "minimum": 0, "maximum": 10 }, "minItems": 6, "maxItems": 30 ...

Utilizing the parent selector in SCSS along with the new deep selector feature in Vue 3

Help! I'm trying to get this code snippet to work, but I keep encountering an error. <style lang="scss" scoped> :deep(.q) { &-badge { font-size: 10px; padding: 1px 4px; &--floating { top: -2px; ...

Obtain the content slot in Vue.js 2 and convert it into a string

Is it possible to retrieve the string inside a slot before that slot is compiled? For example: <div> <slot> <component-test text="test1"></component-test> </slot> </div> I am looking for the result "<co ...

Node.js Binary Search Tree - Error: Identifier Not Found

A program run through node.js has been developed to create a binary search tree with various methods like insert, remove, and print. The program is divided into two separate files: Tree.js, which exports the functions Tree() along with its methods and test ...

SailsJS - handling blueprint routes prior to configuration of routes

I am trying to configure a route in my config/routes.js file as shown below '*' : { controller: 'CustomRoutes', action: 'any', skipAssets:true } The CustomRoutes controller is responsible for handling custom routes. Th ...

The function is defined, but it cannot be set to null

Having trouble understanding this error message "Cannot set properties of null." I'm attempting to update the innerHTML with the output text from four functions that my button triggers. However, it seems to be stopping at the first function now even t ...

Discover the methods for accessing an array of IDs by implementing an event trigger in conjunction with checkboxes

Can you assist me with a dilemma I'm facing? I've developed a static form containing numerous checkboxes and checklists. My challenge arises when trying to integrate a JavaScript code that automatically selects subcategories when parent checkboxe ...