我正在尝试观察“item.amount”v-model 中的变化，并在每一千之后添加逗号。问题是 v-model 是一个对象项，因此我无法使用 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, ",");
最佳答案
我认为您需要通过方法onType处理@input事件来观察变化，该方法采用当前项目的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>编辑
如果输入已预先填充，则可以在已安装的 Hook 中更改值
关于javascript - 观察vuejs中动态变化对象的变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52894434/