How to Resize a div Using Vue.js without el.style.attr Command

I've been attempting to create something similar to the image using Vue, but I'm struggling with resizing the div elements.

Group of Circles:

Vue Warning:

Error in mounted hook: "TypeError: Cannot read property 'style' of undefined

I also tried using 

el.setAttribute("style", "top: px; bottom: px;...")
, but encountered errors with the setAttribute() method.

<template>
  <div class="wavyCircles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</template>

computed: {
    circleSizing() {
      let circles = document.getElementsByClassName("circle")
      for (let i = 0; i <= circles.length; i++) {
        circles[i].style.top = 10 * (i + 1)
        circles[i].style.bottom = 10 * (i + 1)
        circles[i].style.left = 10 * (i + 1)
        circles[i].style.left = 10 * (i + 1)
      }
    }
  },

  mounted: function() {
    this.circleSizing();
  }
javascriptvue.js

Answer №1

It's recommended to use a method instead of a computed property, and also you had an extra loop causing the issue with circles[i] being undefined.

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el: "#app",
  methods: {
    circleSizing() {
      let circles = document.getElementsByClassName("circle")
      for (let i = 0; i <= circles.length - 1 ; i++) {
        circles[i].style.top = 10 * (i + 1) + "px"
        circles[i].style.bottom = 10 * (i + 1) + "px"
        circles[i].style.left = 10 * (i + 1) + "px"
        circles[i].style.left = 10 * (i + 1) + "px"
      }
    }
  },
  mounted() {
      this.circleSizing()
  }
})
.wavyCircles {
  position: relative;
}

.circle {
  position: absolute
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="wavyCircles">
    <div class="circle">u</div>
    <div class="circle">s</div>
    <div class="circle">e</div>
    <div class="circle">m</div>
    <div class="circle">e</div>
    <div class="circle">t</div>
    <div class="circle">h</div>
    <div class="circle">o</div>
    <div class="circle">d</div>
    <div class="circle">i</div>
    <div class="circle">n</div>
    <div class="circle">s</div>
    <div class="circle">t</div>
    <div class="circle">e</div>
    <div class="circle">a</div>
    <div class="circle">d</div>
  </div>
</div>

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 could be causing the computed property in Vue 2 component to not return the expected state?

I'm encountering an issue with my Vue component where it fails to load due to one of its computed properties being undefined: Error: Cannot read properties of undefined (reading 'map') Here is the snippet of the computed property causing ...

javascriptvue.jsvuejs2statevuex

Creating a plane in Three.js using points along different axes

My goal is to construct a plane that intersects the points (2, 3, 12) on the x, y, and z axes respectively (equivalently, the equation of the plane is 6x + 4y + z = 12). So far, I have attempted to generate a flat plane and rotate it around the three axes ...

javascriptthree.js

Uploading Images in VueJs using Laravel

Hey everyone, I'm currently facing a challenge with uploading images from VueJs to a Laravel endpoint. So far, the only method I have found is sending the base64 of the image through the request. The Vue side seems well set up for this task. However, ...

phplaravelvue.js

Implementing jQuery's live() method to handle the image onload event: a guide

Looking to execute a piece of code once an image has finished loading? Want to achieve this in a non-intrusive manner, without inline scripting? Specifically interested in using jQuery's live() function for dynamically loaded images. I've attemp ...

javascripthtmlonloadjquery

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

javascripthtmljquerycsstwitter-bootstrap

Is there a way to retrieve the current state of a Material UI component in a React functional component without needing to trigger an event by clicking on

Seeking a way to retrieve current values of Material Ui components without the need to click on any event after page reloads or DOM changes. These values are pulled from a database. My goal is to confirm whether the values have been updated or not by chec ...

javascriptreactjsangularmaterial-ui

Why is the reverse sticky navbar not visible after the position changes from fixed to static?

Scenario In the setup, I've implemented a reverse sticky navbar where it remains in position:fixed at the top. However, once the top of a specific div container touches the bottom of the navbar, I switch it to position:static using jQuery. Challenge ...

javascripthtmljquerycss

Creating a dynamic trio of graphs with HTML5, CSS3, and Vanilla JavaScript

I successfully created a tree graph using HTML5 and CSS3, but currently the nodes are static. I am looking to enhance the graph by making it dynamic. By dynamic, I mean that if the number of nodes increases or there are multiple children added, the graph ...

javascripthtmlcssjson

Using $nin alongside $and in Mongoose

Implementing a filter for an admin user using mongoose operations. The user should be able to view all saved files except for those that are classified as draft files. However, the admin user should still have access to their own saved draft files. Code ...

javascriptnode.jsmongodbmongoose

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

javascriptjqueryhtmlcss

Javascript functions triggering repeatedly

I'm working on creating a fun trivia quiz using JavaScript functions. Each question involves globally defined functions called "right" and "wrong" that are supposed to update the score accordingly. However, I've run into an issue where the quiz s ...

javascript

The Google timezone API is displaying an inaccurate daylight saving offset

London now has an additional +1 hour of daylight saving time. I made a request to the Google timezone API for the London timezone, but unfortunately, it is not displaying the correct time. https://maps.googleapis.com/maps/api/timezone/json?location=51.507 ...

javascriptjsongoogle-mapstimezonegoogle-api

Implementing yup validation to check if a form field begins with the same value as another input field

In my form, I have two fields - carriercode and billnum. I want to ensure that the value in the billnum field always starts with the carriercode as a prefix. For example, if carriercode=ABCD, then billnum should start with ABCD followed by any combination ...

javascriptreactjsvalidationyup

Accessing props in setup function in Vue 3

I am encountering issues when trying to access the props value (an array) in my composition API setup. The component I have is called DropDown, and I am passing it an array of objects. Here's what I need to achieve: export default { emits: ['up ...

javascripttypescriptvue.jsvuejs3vue-composition-api

What is the best way to integrate `electron` into a Quasar Vue component environment?

Is there a way to access the main electron process fs module from a renderer side module, like a vue component within the Quasar framework? I attempted different approaches in a component but encountered the following error: const { app } = require(&apos ...

vue.jselectronquasar

Disable video playback on Internet Explorer 7 (with Rob W's method)

I've successfully implemented this script created by Rob W from StackOverflow, but unfortunately it's not working on IE7. You can view the script on this jsfiddle page. I've also tried importing this to enable JSON on IE, but the issue pers ...

javascriptinternet-explorer-7youtubeyoutube-javascript-api

Is it possible to use file upload for sending via Ajax's POST method?

Let's talk about the scenario at hand Here's what happens in a single form: 1) The user clicks on the 'browse' button, which opens a dialog to select an image file for uploading. Example: input id='img_upload' name="ufile" ...

phpjavascriptajaxfile-upload

Issue: ParserError encountered due to a Syntax Error found at line 1, column 32

As a beginner in programming, I am encountering an issue. When I run "npm run build" in the Terminal to compress my project in React.js, I encounter this error. Interestingly, I have previously created another project without facing this problem, and I can ...

javascriptnode.jsjsonreactjsnpm

Webpack fails to handle CSS background images

I'm having trouble with my Webpack configuration as it's not processing CSS images set in the background property: background: url('./hero.jpg') no-repeat right; This is resulting in an error message that reads: ERROR in ./src/app/comp ...

javascriptcssnode.jsreactjswebpack

What is the process for changing the behavior when the checkbox is selected or deselected?

Hello everyone. I'm facing a challenge that I can't seem to overcome. I'm trying to adjust the behavior of an element using the ".on/.off" methods based on whether a checkbox is ticked or not. Can someone provide some guidance on how to achi ...

javascriptjquery