Unable to adjust the size of a DIV with a button click in Vue3

Question

Unable to adjust the size of a DIV with a button click in Vue3

I am having trouble resizing a DIV block in Vue3. Whenever I click the button, I receive an error message saying "Cannot read properties of undefined (reading 'style')". I know there is an issue with the JS part of the code, but I'm not sure how to correct it.

Here is the relevant HTML:

<div ref="block2">
<button v-on:click="changeWidth()"></button>
</div>

And here is the corresponding JavaScript:

methods: {
    changeWidth:function()
            this.$refs.block2.style.width = "150px";
         }     
}

The CSS styling for the DIV is as follows:

#block2{
    position:absolute;
    z-index:5000;
    width:50px;
    height:50px;
    background-color: #7d7d7d;
    transition: all .3s ease-in;
}

Any assistance would be greatly appreciated.

javascript html css vuejs3

Answer 1

Answer №1

If you're looking to trigger the operation on a button press, my examples include variables to track the current state and input field. This setup can easily be modified to dynamically resize when the input field is updated without requiring a button press.

For Vue 3, it's advisable to move away from the Options API used in Vue 2 and embrace the Composition API for a more dynamic coding approach in Vue.

Approach #1: Resizing with REF Element

I've defined the container as a ref named container. Furthermore, I've implemented a resize() function that executes on button press. Within this function, the value of currentValue is applied to the style.width and style.height attributes of the ref component.

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const container = ref(null)
    const currentValue = ref(100)
    
    const resize = () => {
      container.value.style.width = `${currentValue.value}px`
      container.value.style.height = `${currentValue.value}px`
    }
    
    return { currentValue, container, resize }
  },
}).mount('#app')

.container {
  width: 100px;
  height: 100px;
  background: #363635;
  color: #fff;
  margin: 20px 0;
  overflow: hidden;

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a3a0b095e6fbe6fbe1">[email protected]</a>/dist/vue.global.prod.js"></script>

<div id="app">
  <div ref="container" class="container"></div>
  
  <input v-model="currentValue" type="number" min="1">
  <button @click="resize">Resize container to {{ currentValue }}px</button>
</div>

Approach #2: Resizing using CSS Attributes

In this method, I introduced a variable called nowValue to store the current pixel size of the container. The resize() function updates the nowValue variable with the value of currentValue from the input field upon button press. Different approaches exist to leverage nowValue in CSS; in this instance, I directly set these values in a style HTML attribute. Consequently, any change to nowValue automatically reflects in the DOM.

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const nowValue = ref(100)
    const currentValue = ref(100)
    
    const resize = () => {
      nowValue.value = currentValue.value
    }
    
    return { currentValue, nowValue, resize }
  },
}).mount('#app')

.container {
  width: 100px;
  height: 100px;
  background: #363635;
  color: #fff;
  margin: 20px 0;
  overflow: hidden;

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4533302005766b766b71">[email protected]</a>/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="container" :style="{ width: `${nowValue}px`, height: `${nowValue}px` }"></div>
  
  <input v-model="currentValue" type="number" min="1">
  <button @click="resize">Resize container to {{ currentValue }}px</button>
</div>

Answer 2

If you're looking to trigger the operation on a button press, my examples include variables to track the current state and input field. This setup can easily be modified to dynamically resize when the input field is updated without requiring a button press.

For Vue 3, it's advisable to move away from the Options API used in Vue 2 and embrace the Composition API for a more dynamic coding approach in Vue.

Approach #1: Resizing with REF Element

I've defined the container as a ref named container. Furthermore, I've implemented a resize() function that executes on button press. Within this function, the value of currentValue is applied to the style.width and style.height attributes of the ref component.

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const container = ref(null)
    const currentValue = ref(100)
    
    const resize = () => {
      container.value.style.width = `${currentValue.value}px`
      container.value.style.height = `${currentValue.value}px`
    }
    
    return { currentValue, container, resize }
  },
}).mount('#app')

.container {
  width: 100px;
  height: 100px;
  background: #363635;
  color: #fff;
  margin: 20px 0;
  overflow: hidden;

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a3a0b095e6fbe6fbe1">[email protected]</a>/dist/vue.global.prod.js"></script>

<div id="app">
  <div ref="container" class="container"></div>
  
  <input v-model="currentValue" type="number" min="1">
  <button @click="resize">Resize container to {{ currentValue }}px</button>
</div>

Approach #2: Resizing using CSS Attributes

In this method, I introduced a variable called nowValue to store the current pixel size of the container. The resize() function updates the nowValue variable with the value of currentValue from the input field upon button press. Different approaches exist to leverage nowValue in CSS; in this instance, I directly set these values in a style HTML attribute. Consequently, any change to nowValue automatically reflects in the DOM.

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const nowValue = ref(100)
    const currentValue = ref(100)
    
    const resize = () => {
      nowValue.value = currentValue.value
    }
    
    return { currentValue, nowValue, resize }
  },
}).mount('#app')

.container {
  width: 100px;
  height: 100px;
  background: #363635;
  color: #fff;
  margin: 20px 0;
  overflow: hidden;

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4533302005766b766b71">[email protected]</a>/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="container" :style="{ width: `${nowValue}px`, height: `${nowValue}px` }"></div>
  
  <input v-model="currentValue" type="number" min="1">
  <button @click="resize">Resize container to {{ currentValue }}px</button>
</div>

Answer 3

Answer №2

Indeed, there seems to be an issue with both the JavaScript and HTML in this case. Here is the corrected code: HTML:

<div id="block2">
  <button v-on:click="changeWidth()">Resize</button>
</div>

JavaScript:

methods: {
  changeWidth: function() {
    const block2 = this.$refs.block2;
    if (block2) {
      block2.style.width = "150px";
    } else {
      console.error("Element with ref 'block2' not found");
    }
  }
}

I trust this clarifies things for you:)

Answer 4

Indeed, there seems to be an issue with both the JavaScript and HTML in this case. Here is the corrected code: HTML:

<div id="block2">
  <button v-on:click="changeWidth()">Resize</button>
</div>

JavaScript:

methods: {
  changeWidth: function() {
    const block2 = this.$refs.block2;
    if (block2) {
      block2.style.width = "150px";
    } else {
      console.error("Element with ref 'block2' not found");
    }
  }
}

I trust this clarifies things for you:)

Answer 5

Answer №3

Oh my goodness, I can't believe all I had to do was include

id="block2"

Seems like everything is finally in order....

Answer 6

Oh my goodness, I can't believe all I had to do was include

id="block2"

Seems like everything is finally in order....

Unable to adjust the size of a DIV with a button click in Vue3

Answer №1

Approach #1: Resizing with REF Element

Approach #2: Resizing using CSS Attributes

Answer №2

Answer №3

Similar questions

When the tooltip component is triggered in a React application, the cursor is automatically directed to

The mysterious anomaly in Vue.js

Best practices for alerting using React and Redux

Transfer spoken words into a textbox using the keyboard-microphone feature on an iPad or mobile device

The error of 'illegal invocation' occurs when attempting to use input setCustomValidity with TypeScript

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

Field for text input enclosed within the <select> tag

Issue with hiding div using jQuery's length option

Retrieve the maximum number of slots from a JSON file and implement them into the

Unable to place a div below another div

JQuery fails to remove the "display:hidden" attribute

Combine es6 imports from the identical module using an Eslint rule or plugin

Express Server React 403 Forbidden Error

Issue with the dynamic updating of props

Chrome renders the javascript source file in a jumbled and unreadable format

How to Perfectly Align a Gif

What is the best way to display a single font in various sizes?

Utilizing React's useState to store data in local storage

JavaScript method to clear a variable

Guidelines for redirecting an on-click action to navigate to a link rather than entering text