Vue JS не обновлять мой стиль в div только в первом цикле - PullRequest
Новая
       5

Vue JS не обновлять мой стиль в div только в первом цикле

0 голосов
/ 11 февраля 2019

У меня есть выбор с 4 вариантами.я хочу, если я нажму на опцию, чтобы изменить свой стиль в моем div

, я попробовал это с setInterval () на console.log (), он показывает мое значение правильно, но 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 Ответ

0 голосов
/ 11 февраля 2019

strUser не является элементом данных Vue и поэтому не реагирует.Вы должны обновить backcolor.Вам также не следует пересоздавать экземпляр Vue каждый раз, когда ваш интервал срабатывает.

Вы должны иметь Vue, управляющий как select , так и div.Использование интервала для опроса выбора ужасно взломано.

Вот простой пример выбора, управляющего цветом фона элемента 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>
...