CODEWITHSUNDEEP
javascriptvue.jsdynamic
Ilijanovic
Ilijanovic

Reputation: 14904

vue js dont update my style in a div only at the first loop

i have an selection with 4 options. i want if i click on an option to change my style in my div

i tried it with setInterval() on console.log() it shows my value correctly but vue js dont update it 

<div  v-bind:style="{'box-shadow': schatten, width: breite, height: hoehe, 'text-align': center, margin: mitte, padding: abstand, background: backcolor}">

setInterval(function(){
    var e = document.getElementById("selection");
    var strUser = e.options[e.selectedIndex].value;
var box = new Vue({
    el: '#anmeldebox',
    data: {

        schatten: '0px 0px 25px black',
        breite: '400px',
        hoehe: '200px',
        center: 'center',
        mitte: '0 auto',
        abstand: '20px',
        backcolor: strUser

    }
});

}, 3000);

so strUser get a other value but it still doesnt update

Upvotes: 0

Views: 83

Answers (1)

Roy J
Roy J

Reputation: 43881

strUser is not a Vue data item, and so is not reactive. You should be updating backcolor. You should also not be re-creating the Vue instance every time your interval fires.

You should have Vue control both the select and the div. Using an interval to poll a select is terribly hacky.

Here is a simple example of a select controlling the background color of a div.

new Vue({
  el: '#app',
  data: {
    selectedStyle: 'red'
  }
});
.box {
  height: 20em;
  width: 20em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedStyle">
    <option>red</option>
    <option>blue</option>
  </select>
  <div class="box" :style="{backgroundColor: selectedStyle}"></div>
</div>

Upvotes: 1

Related Questions