0.12.11
Improvements
-
Two-way filters for
v-model
have been reworked. Av-model
binding with read filters will no longer attempt to format the value when the user is still typing; instead it formats the value on blur. This results in a much more natural UX and makes two-way filters much more usable. Demo -
<select v-model="x" options="options">
now supports Object values. That is to say you can provide theoptions
array like this:options = [ { text: 'a', value: { msg: 'A' }}, { text: 'b', value: { msg: 'B' }}, { text: 'c', value: { msg: 'C' }} ]
And the bound value
x
will be the actual object instead of a serialized string. -
filterBy
filter has been improved (#1094):- It now accepts multiple
dataKeys
arguments - Each
dataKey
argument can be either a String or an Array of Strings. - You can alternatively provide a custom filter function as the first argument.
Example:
<!-- multiple dataKeys --> <div v-repeat="user in users | filterBy searchText in 'fieldA' 'fieldB'"> <!-- Array dataKeys --> <!-- fields = ['fieldA', 'fieldB'] --> <div v-repeat="user in users | filterBy searchText in fields"> <!-- filter by function --> <div v-repeat="user in users | filterBy myCustomFilterFunction">
- It now accepts multiple
-
currency
filter can now accept an empty string argument to output the result without a currency symbol. -
When in
debug
mode, Vue will also print async stack traces for warnings. Previously the stack trace stops at the internal batcher handler due to Vue's async update queue; now the stack trace goes all the way back to what originally triggered the update. -
Component asset names can also be in PascalCase in addition to camelCase:
myComponent
andMyComponent
will both be interpreted asmy-component
during the lookup. -
Data object properties prefixed with
_
and$
are now also observed; this means they can be used for data binding, however if it is a root-level property it will not be proxied on the vm instance.For example:
var vm = new Vue({ data: { _test: 123 } }) vm._test // -> undefined vm.$data._test // -> 123
<!-- also need to access via $data in templates --> <p>{{ $data._test }}</p>
-
Computed Property Caching
You can now turn off caching for a specific computed property so that it behaves like a simple getter.
By default, a computed propoerty's cache is only invalidated when one of its reactive dependencies have changed, but this can result in confusion when the user assumes it behaves like a getter.
For example:
computed: { example: function () { return Date.now() + this.msg } }
The cache for
vm.example
only invalidates whenvm.msg
has changed, because Vue has no way to detect whetherDate.now()
has changed or not (polling is obviously a bad idea). So, when you accessvm.example
, it will not change unlessvm.msg
has changed.This is different from a simple getter-like behavior, where the function is re-evaludated every time the property is accessed. If that is what you want, you can turn off caching for that property like this:
computed: { example: { get: function () { /* same getter */ }, cache: false } }
New
-
Added
debounce
filter which can be used withv-on
for debouncing DOM events.Example:
<input v-on="input: onInput | denounce 300">
Fixed
v-attr
should also set corresponding properties forselected
andchecked
.- #1139 error when compiling props for a component with fragment
el
- #1150
keep-alive
andwait-for
not working together - #1152 dynamic component left undestroyed with
keep-alive
+wait-for
- #1155 select option with empty string initial value not initialized properly
- #1162 computed properties evaluation affected by order of data manipulations
- #1185
v-if
linker cache not taking transclusion host into account - #1191 resolveAsset not working properly for transcluded components in strict mode