提问人：Sam 提问时间：11/16/2023 最后编辑：Sam 更新时间：11/17/2023 访问量：46
Javascript + Vue 错误：无法更新滑块的值
Javascript + Vue error: cannot update value of slider
问：
我有两个整数变量：
$globalData.y定义为 中可观察的 Vue，并且main.jsx中定义。App.vue
我有一个绑定到的滑块（即），我希望将 的值更改为滑块的输入值，但我收到多个错误。App.vuexv-model="x"$globalData.y
main.js：
...
Vue.prototype.$globalData = Vue.observable({
y: 0,
});
...
App.vue：
<template>
<div>
<h2>Value: {{ $globalData.y }}</h2>
<input type="range" min="0" max="60" value="30"
v-model="x" oninput="updateData(x)">
</div>
</template>
<script>
export default {
data () {
return {
x: 0
}
},
methods: {
updateData(x){
this.$globalData.y = x;
}
}
}
</script>
尝试更改滑块的值时，出现错误。如果我尝试直接更新值，我会收到错误。updateData is not definedoninput="this.$globalData.y = this.x"Cannot set properties of undefined (setting 'y')
答：
0赞
tao
11/17/2023
#1
表单元素上的 v-model 是 + 的简写（受影响的道具可能会有所不同，具体取决于输入类型）。但这个想法是你不能在同一个表单元素上使用这两种模式。@input:value
解决此问题的一种方法是直接使用：$globalData.yv-model
<template>
<div>
<h2>Value: {{ $globalData.y }}</h2>
<input type="range" min="0" max="60" v-model="$globalData.y" />
</div>
</template>
如果你希望组件有一个别名 ，你可以把它写成一个计算出的 getter/setter：x$globalData.y
<template>
<div>
<h2>Value: {{ $globalData.y }}</h2>
<input type="range" min="0" max="60" v-model="x" />
</div>
</template>
<script>
export default {
computed: {
x: {
get() { return this.$globalData.y }
set(val) { this.$globalData.y = val }
}
}
}
</script>
但我认为这是无用的，因为你可以在任何你想使用的地方使用，对吧？$globalData.yx
旁注：是一个自闭合标签。不关闭它（以 结尾）可能会导致其后面的内容出现意外的布局解析错误。始终使用有效的标记。<input>/>
评论
@input@inputv-on:inputv-model="$globalData.y"