代码之家 › 专栏 › 技术社区 › chipit24

如何防止Vue输入设置值?

vuejs2

chipit24 · 技术社区 · 6 年前

// HTML
<div id="app">
  Value: <pre>{{ value }}</pre>
  <input type="text" :value="value" @input="setValue">
</div>

// JS
new Vue({
  el: "#app",
  data: {
    value: '',
  },
  methods: {
    setValue(event){
      /* Remove non-numeric values */
        this.value = event.target.value.replace(/[^\d]/g, '');
    }
  }
});

我在JSFiddle上设置了它: http://jsfiddle.net/eywraw8t/353729/ .

如果运行上面的代码,并在输入元素中输入非数字的乱码(例如。 asdasfa ),您将看到输入元素将包含您输入的文本( 阿斯达斯法 ),但输入上方的元素将为空!

type="number" .

2 回复 | 直到 6 年前

Sphinx 6 年前

因为价值 this.value 不会更改(始终=“”),因此不会触发重新渲染。

你可以用 this.$forceUpdate()

或者使用具有不同值的绑定键。

new Vue({
  el: "#app",
  data: {
    value: '',
    errorDescription: ''
  },
  methods: {
  	setValue(event){
      /* Remove non-numeric values */
    	this.value = event.target.value.replace(/[^\d]/g, '')
      this.errorDescription = 'Only Number allow'
      this.$forceUpdate()
    }
  }
})

.error {
  background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  Value: <pre>{{ value }}</pre><span class="error">{{errorDescription}}</span>
  <input type="text" :value="value" @input="setValue">
</div>

Phil 6 年前

问题是Vue没有看到您的 value

一个简单的解决方案是手动设置 <input>

this.value = event.target.value = event.target.value.replace(/\D/g, '')

http://jsfiddle.net/9o2tu3b0/

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前