如何在 VUE 中更改 CSS

Question

I have an HTML element:

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

I'm trying to change height like this:

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
}

But it doesn't work.

Also, how can I smoothly drag div but only vertically (like scrollbar)?

Answer 1

I think your problem is that you put your functions outside the methods . Bring them to methods and use this to call them and change the this.scrollbarheight variable.

I provide a code snippet to simulate your situation.

 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>