JavaScript + Vue错误：无法更新滑块的值

vsdwdz23 于 2023-11-21 发布在 Vue.js

关注(0)|答案(1)|浏览(125)

我有两个整型变量：

$globalData.y被定义为在main.js中可观察到的vue，以及
App.vue中定义的x。

我在App.vue中有一个滑块绑定到x（即v-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 defined错误。如果我试图直接通过oninput="this.$globalData.y = this.x"更新滑块的值，我得到了一个Cannot set properties of undefined (setting 'y')错误。

vue.js

来源：https://stackoverflow.com/questions/77496213/javascript-vue-error-cannot-update-value-of-slider

1条答案

按热度按时间

flvlnr441#

表单元素上的v-model是@input + :value的简写（根据输入类型，受影响的 prop 可能会有所不同）。但想法是 * 你不能在同一个表单元素上使用两种模式 *。
解决这个问题的一种方法是在v-model中直接使用$globalData.y：

<template>
  <div>
    <h2>Value: {{ $globalData.y }}</h2>
    <input type="range" min="0" max="60" v-model="$globalData.y" />
  </div>
</template>

字符串
如果你想让组件有一个$globalData.y的x别名，你可以把它写成一个计算的getter/setter：

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

型
但我认为这是无用的，因为你可以在任何你想使用x的地方使用$globalData.y，对吗？
旁注：<input>是一个自关闭标记。不关闭它（以/>结尾）可能会导致它后面的内容出现意外的布局分析错误。请始终使用有效的标记。

赞(0）回复(0）举报 2023-11-21

我来回答

JavaScript + Vue错误：无法更新滑块的值

1条答案

相关问题

热门标签

最新问答