Guide on adjusting CSS in Vue

Here's the HTML element that I'm working with:

<div id="scrollbar" style="background-color: #000;" 
     v-bind:style="{ height : scrollbarheight + 'px' }"
></div>

I have been attempting to adjust the height using the following code:

let scrollbarheight = 30

function jsonMSG(msg) {
  const cmd = JSON.parse(msg)
  console.log('CMD: ', cmd.height)
  const h = Math.round(cmd.height / 1024)
  scrollbarheight = h
}

function webSocketOnMSG(msg) {
  if (typeof (msg.data) === 'string') {
    jsonMSG(msg.data)
    return
  }
}

data() {
    return {
      scrollbarheight
      ...
    }
}
created() {
    console.log('Starting Connection to WebSocket')
    this.connection = new WebSocket('ws://127.0.0.1:8080/')
    // this.connection = new WebSocket('ws://echo.websocket.org')
    this.connection.onopen = function (event) {
      console.log(event)
      console.log('Success')
    }
    this.connection.onmessage = webSocketOnMSG
}

However, it seems like my attempts are not successful.

Additionally, I am curious about how I can implement a smooth vertical dragging functionality on the div (similar to a scrollbar).

Answer №1

It seems like the issue lies in placing your functions outside of the methods section. Make sure to move them inside the methods and utilize this to invoke them and update the this.scrollbarheight variable accordingly.

Below is a snippet of code that demonstrates how to replicate your scenario:

var app = new Vue({
  el: '#app',
  data() {
    return {
      scrollbarheight: 30
    }
  },
  methods: {
    increaseHeight() {
      this.scrollbarheight += 30
    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="app">
  <div id="scrollbar" style="background-color: #000;" v-bind:style="{ height : scrollbarheight + 'px' }"></div>
  <button @click="increaseHeight()">
Increase
</button>
</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

The browser automatically adds a backslash escape character to a JavaScript object

When attempting to send an MQTT message to a topic from my angular app, the message needs to be in a specific syntax: { "Message": "hello" //the space after : is mandatory } However, upon sending the message in the correct format, the browser aut ...

Remove outdated cards from a React array

I am facing a complicated situation and require some assistance. Below is the code snippet: The function provided below is used to determine if a credit card has expired or not. It returns true if the card is expired and false if it's valid. const i ...

obtain the string representation of the decimal HTML entity value

Similar Question: how to create iphone apps similar to ibeer, imilk, ibug, ibeer Using javascript to obtain raw html code Imagine having an html section like this: <div id="post_content"> <span>&#9654;<span> </div> ...

Ways to display an HTML code by utilizing the onclick() function through PHP?

I have a button that looks like this: <input type="submit" name="submit5" class="btn" value="Add Date" onclick="create_date_field()" /> Every time the button is clicked, I want to append the following code inside the <tr> tags. It should be po ...

Modifying the 'child' node within a JSON object

Exploring the implementation of d3s Collapsible tree using a custom node hierarchy. My dataset structure deviates from the norm, for example: http://jsfiddle.net/Nszmg/2/ var flare = { "Name": "Example", "members": [ { "BName":"Ja", ...

tips for showcasing an item in a tooltip within a data table

I am working on dynamically creating a table with data retrieved from an ajax response. My goal is to display the data stored in an object within a tooltip attached to each cell. Currently, I have successfully rendered the table, but it is displaying `[obj ...

LiveValidation plugin causing issue with removing dynamically inserted elements

My form validation is powered by the Live Validation plugin. After submission, the plugin automatically inserts a line of code like this one: <span class=" LV_validation_message LV_valid">Ok</span> However, I encountered an issue when trying ...

Accessing the front camera on a laptop using mediaDevices.getUserMedia

I am currently working on an internal web application for our organization, with the main users accessing it through desktop or laptop machines. One of the features I need to implement is the ability for the user to take a selfie. To achieve this, I refer ...

Employing a function to concatenate promises

In my coding process, I have come across a situation where I need to fetch content and then save it using two separate functions. Each function performs a different task based on the type of content provided. These functions act as helper functions in my o ...

Retrieving JSON Arrays in PHP through an AJAX Request

Having trouble extracting data from multiple arrays in an AJAX request. Can anyone help? Here's what I'm trying to send: https://i.stack.imgur.com/4MEL4.png Executing a jQuery AJAX POST to a PHP file, but uncertain how to retrieve the data. An ...

Failed installation of Semantic-ui through npm encountered

Encountering an error while attempting to install semantic-ui through npm for a new project. Here are the version details: $ node -v v16.14.0 $ npm -v 8.10.0 $ npm i semantic-ui npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

Despite calling this.setState to update my state, the render() method is still displaying the previous values

class EditLocation extends Component { constructor(props) { super(); this.state = { LocationId: '', locationOptions: [], } this.baseState = this.state; this.findLocationById = this ...

Incorporating d3-force-3d computations into a three-dimensional graph visualization tool

Looking to create 3D force directed graphs for my project, but struggling to find a library that incorporates d3-force-3d calculations. The existing libraries I've come across lack the ability to customize forces, particularly 3d-force-graph. Is ther ...

Manipulate SVG using Javascript

Is there a way to edit an SVG file directly in JavaScript without relying on any framework? I have a master SVG file that contains some child SVG elements. I've managed to retrieve the content of these children using Ajax, but now I need to insert t ...

Updating lodash when it depends on jshint: A guide to NPM

After successfully passing an audit in npm, I received the following results: https://i.sstatic.net/ZueZ6.png Now, I am attempting to update my lodash package but I'm unsure of the correct method to do so. I attempted using npm -i --save lodash, how ...

Pinia store getters not functioning properly

When using Pinia on VueJS, I have a store for my licenses where each license is associated with a project through a reference number. The detailed project information is stored in a separate store. To fetch project information in the license store, I have ...

Timed up 10-second countdown with vue.js

<html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> < ...

Promise and Determination failing to produce results

const { GraphQLServer } = require('graphql-yoga'); const mongoose = require('mongoose'); mongoose.connect("mongodb://localhost/test1"); const Todo = mongoose.model('Todo',{ text: String, complete: Boolean }); const ...

Charts.js fails to refresh data following an AJAX call

Having recently delved into the world of js and jquery, I managed to successfully display a chart using Flask and an Ajax request. However, I've hit a roadblock when it comes to refreshing the charts data. If I create a new chart each time as demonstr ...

Using react-router to fetch data from the server side

I have successfully implemented React-router server-side rendering in my express app using the following code snippet: app.use((req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { console.log(renderProps) ...