代码之家 › 专栏 › 技术社区 › Ilijanovic

Vue JS不会只在第一个循环中更新DIV中的样式

dynamic vue.js javascript

Ilijanovic · 技术社区 · 6 年前

我有4个选择。如果我单击一个选项来更改我的分区中的样式

我在console.log()上用setinterval()尝试了它,它正确地显示了我的值,但是Vue JS不更新它。

<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);

所以struser得到了另一个值,但它仍然不更新

1 回复 | 直到 6 年前

Roy J 6 年前

strUser 不是Vue数据项,因此不是被动的。你应该更新 backcolor . 您也不应该在每次触发间隔时重新创建Vue实例。

您应该让Vue控制两个选择和使用一个间隔来轮询一个select的分区非常糟糕。

下面是一个简单的例子,选择控制一个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>