Vue JS如何綁定onChange事件來改變input中的值

Question

我正在使用 npm package vue-range-component ，我使用 slider 更改值，然后在輸入中響應地更改該值

我的問題是我不能對輸入應用onChange事件，我需要能夠改變輸入中的值，例如把數字70，然后這個數字應用到vue-range-component，類似的東西

這是我的沙箱代碼

<template>
  <div class="app-content">
    <div>
        <input type="text" v-model="value[0]" />
        <input type="text" v-model="value[1]" />
    </div>

    <vue-range-slider
      v-model="value"
      :min="min"
      :max="max"
      :formatter="formatter"
      style="margin-top: 40px"
    ></vue-range-slider>

    <div class="multi-range-value-container">
        <p>{{ value[0] }}</p>
        <p>{{ value[1] }}</p>
    </div>
    </div>
</template>

<script>
import "vue-range-component/dist/vue-range-slider.css";
import VueRangeSlider from "vue-range-component";

export default {
  data() {
    return {
      value: [0, 100],
    };
  },

  methods: {
    onChange(event) {
      console.log(event.target.value);
    },
  },

  components: {
    VueRangeSlider,
  },
  created() {
    this.min = 0;
    this.max = 1000;
    this.formatter = (value) => `$${value}`;
  },
};
</script>

Answer 1

Vue 反應性系統的一個警告是，當您通過索引直接設置項的值時，您無法檢測到數組的更改。

如鏈接中所述，有兩種使數組修改反應的主要方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

使用這些方法會強制 VueJS 反應系統更新其 state。

要在您的示例中實現此解決方案，您可以對模型值、@change 事件或@change事件使用觀察@keyup 。

觀察者可能是最耗費資源的方法。 我建議使用@keyup （它會在每次按鍵時觸發，而不是在您使用@change取消聚焦輸入時），然后如果該值用於過濾/排序/加載任何內容，則對輸入進行去抖動。

如果你也想，你也可以直接設置整個數組。

例如，代替設置value[0] = something你可以做value = [...value, something]; 這將是被動的。

Answer 2

確實是 Vue 反應性問題

您可以通過不使用v-model語法糖來修復它，但像這樣拆分它：

從：

<input type="text" v-model="value[0]" />

至：

<input type="text":value="value[0]" @input="changeRange(0, $event.target.value)" />

定義一個方法：

methods: {
  changeRange(index, value) {
    const v = parseInt(value, 10) // value from input is always string
    this.$set(this.value, index, v)
  }
}

更新

上面的代碼是您無論如何都需要的修復程序，但不幸的是vue-range-component有一個不同的問題，因為它會阻止所有用戶鍵盤輸入到同一頁面上的任何input元素 - 請參閱這個和這個問題

此拉取請求已修復它，但尚未發布到 npm

您可以使用問題中描述的一些解決方法，但考慮到維護者（不是）如何處理問題的方式，您最好四處尋找具有類似功能的另一個組件......