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

Question

我有两个整数变量：

• $globalData.y

  定义为

  main.js

  中的 vue observable，以及

• x

  定义于

  App.vue

  。

我在

App.vue

中有一个滑块绑定到

x

（即

v-model="x"

），我希望

$globalData.y

的值更改为滑块的输入值，但我收到多个错误。

---

main.js：

...
Vue.prototype.$globalData = Vue.observable({
  y: 0,
});
...

应用程序.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')

错误。

Answer 1

表单元素上的

v-model

是

@input

+

:value

的简写（根据输入类型，受影响的道具可能有所不同）。但想法是您不能在同一表单元素上使用两种模式。

解决该问题的一种方法是直接使用

$globalData.y

，在

v-model

:

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

或者，如果出于某种原因，您希望此组件具有

$globalData.y

的别名，称为

x

，您可以使用计算的 (setter + getter)：

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

---

旁注：

<input>

是一个自动关闭标签。不关闭它（以

/>

结尾）可能会导致其后面的内容出现意外的布局解析错误。始终使用有效的标记。