Значение Vue JS не обновляется, даже если оно может быть зарегистрировано в Mounted ()

#javascript #vue.js

Вопрос:

У меня есть пользовательский ползунок диапазона, внутри которого я пытаюсь отобразить значение. Мне удалось заставить мой слайдер работать с vinila js, который у меня находится в крючке жизненного цикла ‘mounted ()’. однако, даже если я могу зарегистрировать значение из этого перехвата, оно не отображает и не обновляет значение данных.

Я довольно новичок в Vue, но я думаю, что это каким-то образом должно работать в вычисляемом объекте, но я не знаю, как я бы это сделал,

 <template>
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="slider" />
    <div id="selector">
        <div class="selector-thumb">
           <p>{{rangeValue}}</p>
        </div>
    </div>
    <div class="d-flex">
      <div>
        <p>R5 000</p>
        <p>min</p>
      </div>
      <div style="margin-left:auto">
        <p >R200 000</p>
        <p >max</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    data:function(){
        return{
            rangeValue:0
        }
    },
    mounted(){
        var slider = document.getElementById("slider");
        var selector = document.getElementById("selector");

        slider.oninput = function(){
            selector.style.left = this.value   "%";
            this.rangeValue = this.value;
            console.log(this.rangeValue)
        }
    }
};
</script>

1. пожалуйста, никогда не используйте document.getElementById(...) пожалуйста. вы используете фреймворк, вам это не нужно

2. this.rangeValue в вашем случае устанавливает this для slider.oninput , а не для объекта Vue. Вместо этого используйте функцию arrow ( slider.oninput = () => { /* Code here */ } ).

Ответ №1:

Попробуйте это. Не используйте document.getElementById() или что-то в этом роде. Вы работаете с фреймворком, который вам не нужен.

 <template>
  <div class="slidecontainer">
    <input v-model="rangeValue" type="range" min="1" max="100" value="50" class="slider"  />
    <div :style="{left: rangeValue   '%'}" id="selector">
        <div class="selector-thumb">
           <p>{{rangeValue}}</p>
        </div>
    </div>
    <div class="d-flex">
      <div>
        <p>R5 000</p>
        <p>min</p>
      </div>
      <div style="margin-left:auto">
        <p >R200 000</p>
        <p >max</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    data:function(){
        return{
            rangeValue:50
        }
    },
};
</script>

В случае, если вам нужно получить доступ к элементу, по какой-либо причине, потому что другого способа нет, вы должны сделать это с ref подобным:

 <div ref="myBox"></div>

и затем вы можете получить доступ к своему элементу с помощью: this.$refs.myBox

Обратите внимание: Если вы попытаетесь получить доступ к элементу в mounted or created , вы, вероятно, получите undefined , потому что элемент еще не отрисован. Вам нужно будет использовать $nextTick() , чтобы убедиться, что все отрисовано и готово к доступу.

 this.$nextTick(()=> {
   let element = this.$refs.myBox;
})

Он также имеет поддержку Promise

 await this.$nextTick();
let element = this.$refs.myBox;

Уверен, что метод created или mounted должен быть асинхронным.

Ответ №2:

Ваш function() не отслеживает this. . В этом случае вы должны использовать функцию со стрелкой

 slider.oninput = () => {
  selector.style.left = this.value   "%";
  this.rangeValue = this.value;
  console.log(this.rangeValue)
}

Это должно сохранить ссылку на this неповрежденной и позволит вам получить доступ к вашим данным.

Редактировать: Опубликовано слишком быстро. Я не понимаю, откуда вы получаете this.value . Оно не определено в ваших vue-данных. На этом этапе должно быть доступно только this.rangeValue