Question

我正在尝试查看“ item.amount” v模型中的更改，并在每千个之后添加逗号。问题是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, ",");

Answer 1

我认为您需要通过使用方法@input处理onType事件来观察更改，该方法采用当前项目的index并在Payments数组中进行更改< / p>

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>

编辑

如果输入是预先填充的，则可以在安装的挂钩中更改值

Answer 2

尝试将格式放入方法中。即

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

并像这样输出它；

{{formatNumber(item.amount)}}

或者;

:value="formatNumber(item.amount)"

在vue.js中观察动态变化的对象的变化

2 个答案: