Vue.js中组件的双向绑定的使用
问题描述：
我是Vue.js的新学习者并试图在官方指南中实现示例（example of currency filter）。Vue.js中组件的双向绑定的使用
但是，在实现时，我将组件（值）的属性重命名为（priceValue）。更改后，输入框无法格式化该值 - 它始终显示“0”而不是格式化的值。
这是我所做的唯一改变。问题是什么？
Vue.component('currency-input', {
template: '\
<div>\
<label v-if="label">{{ label }}</label>\
$\
<input\
ref="input"\
v-bind:value="priceValue"\
v-on:input="updateValue($event.target.value)"\
v-on:focus="selectAll"\
v-on:blur="formatValue"\
>\
</div>\
',
props: {
priceValue: {
type: Number,
default: 0
},
label: {
type: String,
default: ''
}
},
mounted: function() {
this.formatValue()
},
methods: {
updateValue: function (value) {
var result = currencyValidator.parse(value, this.priceValue)
if (result.warning) {
this.$refs.input.value = result.value
}
this.$emit('input', result.value)
},
formatValue: function() {
// console log here always get 0
this.$refs.input.value = currencyValidator.format(this.priceValue)
},
selectAll: function (event) {
setTimeout(function() {
\t event.target.select()
}, 0)
}
}
})
new Vue({
el: '#app',
data: {
price: 0,
shipping: 0,
handling: 0,
discount: 0
},
computed: {
total: function() {
return ((
this.price * 100 +
this.shipping * 100 +
this.handling * 100 -
this.discount * 100
)/100).toFixed(2)
}
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js"></script>
<div id="app">
<currency-input
label="Price"
v-model="price"
></currency-input>
<currency-input
label="Shipping"
v-model="shipping"
></currency-input>
<currency-input
label="Handling"
v-model="handling"
></currency-input>
<currency-input
label="Discount"
v-model="discount"
></currency-input>
<p>Total: ${{ total }}</p>
</div>
答
根据DOCS：
对于分量与
v-model工作，它应（这些可以在2.2.0+配置 ）：
- 接受
value道具- 发出
input事件与新价值
这可以用model选项块配置 sinse的2.2.x：
Vue.component('currency-input', {
model: {
prop: 'propValue',
// event: 'input' - you can also customize event name, not needed in your case
},
有了这个地方，你的代码将再次工作：https://jsfiddle.net/wostex/j3a616a5/