V_model không nhận dữ liệu khi thay đổi dữ liệu Input qua Keypress

vue-core

#1

Hi các bạn, Mình đang có lỗi mong các bạn giúp.
Mình có textbox input, dữ liệu input mình có thay đổi trong sự kiện keypress. ví dụ để hiện thị dữ liệu dạng tiền tệ ( 123,121) chẳng hạn, nhưng khi lấy dữ liệu từ v-model thì bị rỗng.
Bạn nào có cách xử lý trợ giúp mình với.
Mình cám ơn


#2

Bạn có thể chia sẽ code trong trường hợp mà bạn nói ở trên được không?


#3

Ví dụ mình có thẻ input

Nhưng trong Jquey mình có xử lý sự kiên Keydow để chặn chỉ nhập đươc số và format value về định dang 123,121.44, sau đó set lai value cho input.

Nhưng khi lưu dữ liệu chẳng hạn thì mình lấy từ v-model toàn bị rỗng, tìm hiểu thì dó lấy giá trị trước khi change j đó, mình thêm thuộc tính [ .lazy ] nhưng vẫn không được.


#4

Không rõ mình có hiểu đúng ý bạn hay không. Nhưng về cơ bản v-model là một ‘sugar syntax’ của việc binding input’s value và listen @input event.

Mình có nhiều phương pháp để làm theo kịch bản bạn chia sẽ với jQuery. Ví dụ mình có component template với input element sau đó mình watch local state được assign đến v-model directive của input, bất kì lúc nào state thay đổi mình sẽ set lại value cho input thông qua local state như thế này:

<template>
  <div class="hello">
    <input
      type="number"
      ref="currencyNumber"
      v-model="originalNumber"
    >
  </div>
</template>

// Javascript
<script>
export default {
  name: 'Demo',
  data() {
    return {
      originalNumber: 100000.23
    }
  },
  methods: {
    formatNumber(value) {
      console.log(value)
      this.originalNumber = Math.round(value) // Re-format input value
    }
  },
  watch: {
    originalNumber: {
      handler: 'formatNumber'
    }
  }
}
</script>

#5

Cho mình hỏi thế khi làm form nhập thì mình dùng khonagr 10 textbox thì mình lại phải add 10 conponent đúng không ạ, Thế hơi bất tiện nhỉ


#6

Mình dùng Vue.directive để thay v-model có khả thi không nhỉ