Наблюдение за изменениями в динамически изменяющихся объектах в vuejs - PullRequest
Новая
       6

Наблюдение за изменениями в динамически изменяющихся объектах в vuejs

0 голосов
/ 19 октября 2018

Я пытаюсь следить за изменениями в v-модели "item.amount" и добавлять запятые к ней после каждой тысячи.Проблема в том, что v-модель является объектом, и поэтому я не могу получить к ней доступ напрямую, используя метод watchМой код показан ниже: 

<div class="row" v-for="(item,index) in Payments" :key="index">
  <input type="text" v-model="item.amount" placeholder="Amount" class="typeahead form-control-sm">
  <input class="typeahead form-control-sm" type="number" placeholder="Destination number" max="9999999999" min="0" onKeyDown="if(this.value.length==10 && event.keyCode>47 && event.keyCode < 58)return false;" v-model="item.Number" />
</div>

Как я могу следить за изменениями в item.amount, чтобы я мог отформатировать вывод, когда пользователь вводит сумму , используя что-то вроде String(item.amount).replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Я думаю, вам нужно следить за изменениями, обрабатывая событие @input по методу onType, который берет index текущего элемента и изменяет его в Payments массив 

new Vue({
  el: '#app',
  data: {
    Payments: [{
        "amount": 1122

      },
      {
        "amount": 8852

      },
      {
        "amount": 75553

      }
    ]
  },
  methods: {
    onType(i) {
      this.Payments[i].amount = String(this.Payments[i].amount).replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  },
  mounted() {
    for (let i = 0; i < this.Payments.length; i++)
      this.onType(i)
  }

})
body {
  padding: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div class="row" v-for="(item,index) in Payments" :key="index">
      <input type="text" v-model="item.amount" @input="onType(index)" placeholder="Amount" class="typeahead form-control-sm">
      <input class="typeahead form-control-sm" type="number" placeholder="Destination number" max="9999999999" min="0" onKeyDown="if(this.value.length==10 && event.keyCode>47 && event.keyCode < 58)return false;" v-model="item.Number" />
    </div>

РЕДАКТИРОВАТЬ

Значения могут быть изменены в установленном крюке, если входы предварительно заполнены

0 голосов
/ 19 октября 2018

Попробуйте поместить форматирование в метод.Т.е. 

methods: {
  formatNumber: function(x){
    String(x).replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
}

И вывести это так; 

{{formatNumber(item.amount)}}

Или; 

:value="formatNumber(item.amount)"
...