Javascript Vue JS值未更新，即使它可以登录到Mounted（）中

我有一个自定义范围滑块，我试图在其中显示一个值。我设法让我的滑块与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>

{{rangeValue}}

R5000

闵

R200 000

max

导出默认值{
数据：函数（）{
返回{
范围值：0
}
},
安装的（）{
var slider=document.getElementById（“slider”）；
var选择器=document.getElementById（“选择器”）；
slider.oninput=函数（）{
selector.style.left=this.value+“%”；
this.rangeValue=this.value；
console.log（this.rangeValue）
}
}
};

您的

函数（）

没有跟踪

这一点。

。在这种情况下，必须使用箭头函数

slider.oninput=（）=>{
selector.style.left=this.value+“%”；
this.rangeValue=this.value；
console.log（this.rangeValue）
}

这将保持对

此

的引用完整，并允许您访问数据

---

编辑：发布有点太快了。我不知道你从哪里得到这个.value。它未在vue数据中定义。此时应只能访问

此.rangeValue

请尝试此操作。不要使用

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>

然后，您可以使用：

this.$refs.myBox

注意：如果您试图访问

装入的

或

创建的

中的元素，您可能会得到一个

未定义的

，因为该元素尚未渲染。您需要使用

$nextTick（）

确保所有内容都已呈现并准备好访问

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

它也有承诺支持

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

---

确保创建的

方法或装入的
方法必须是异步的。
请不要使用
文档。getElementById（…）
请。您使用的是一个框架，您不需要这些东西。在您的案例中，rangeValue为
滑块设置
此
。oninput
，而不是Vue对象。改用箭头函数（
slider.oninput=（）=>{/*code here*/}
）。此.value指的是slider元素的值
await this.$nextTick();
let element = this.$refs.myBox;