Can someone explain to me exactly what the input-value attribute does on the v-switch component?
I think it has something to due with using the component with vuex, when you cannot use v-model directly.
It seems to be working for me, but I don't understand it exactly.
You can see the attribute here: https://vuetifyjs.com/en/components/selection-controls#api
Where it is described as: "The v-model bound value".
(I originally found the attribute in an example somehere.)
input-value behaves like a default value attribute that you would expect in other components.
Normally v-model is syntax sugar for :value="value" :input="$emit('input', $event.target.value)", but we can change it.
from selectable.js:
model: {
prop: 'inputValue',
event: 'change'
},
So the above lines (see vue docs) make your v-model bind to input-value instead of value likely because some components i.e. checkbox (which v-switch uses) have value attribute reserved for something else.
So value attribute is then used to set the value which will be represented when the component is checked.
And in v-switch case v-model is syntax sugar for something like :input-value="value" #change="value = $event"
Codepen
Related
I really like the syntax props: ['title', 'someInt', 'description'] in my Vue component. How do I require just 1 of those props, namely someInt, to be an integer? But without having to explicitly define the data types for the other props (they can remain default as String).
My parent component is doing <my-component title='some title' some-int='100' description='desc'></my-component> and later when I do this.someInt it's of datatype String not integer (Number). Thanks!
You can keep the props: ['title', 'someInt', 'description'] syntax if you updated your <my-component to use binding for the properties you want as Numbers. Example:
<my-component title='some title' :some-int='100' description='desc'></my-component> - that will make someInt come thorugh as a Number since you're binding it via the : character. Vue parses the expression literally.
In beforeRouteEnter event I call to promise/http which take a second to get some data.
After I get the data I pass to the result prop in the component. (using next function).
Also I have a getter that take the value from the prop.
The problem is vue is invoke the getter before it set the value (by next function), so I got undefined.
How can I solve this error?
Here is an code example of the problem
Problem is that when you use next(vm ...) you work with context of page component where is your #Prop defined. You can't modify #Prop value this way. There is some hacks how you can do that but is it really necessary to use #Prop in this case? Why you simply don't use basic variable in page component?
If you replace
#Prop() result
with:
result: Object = {};
everything works great.
If you really need prop here maybe you can just copy prop value to some variable (use watch if you need detect changes) but i don't see any purpose for prop here.
Hope this answer helps you :)
In vue 1 it was possible to do this:
<app v-ref:test-app></app>
and then reference it like so:
vm.$refs.testApp;
however in vue 2 the syntax for the ref has changed to:
<app ref="test-app"></app>
but this no longer can be referenced by
vm.$refs.testApp
instead it only works if:
<app ref="testApp"></app>
which in standard DOM stuff isn't allowed. Is it a bug? can kebab case no longer be used?
Since the syntax has been changed from that of a namespaced element attribute (i.e., v-ref:foo-bar) to a normal key-value-pair attribute (i.e., ref="fooBar"), the implicit kebab-case-to-camel-case conversion is no longer applicable because the reference name is a plain string and is not constrained by having to conform to the requisite lowercase-kebab-case HTML syntax.
In other words, you can identify a ref with any string, so it wouldn't make sense for Vue to manipulate it. Have a look at this CodePen for an example in action of what I mean.
But, basically, a plain string ref value means you can define a reference like this:
<div id="app" ref="test ** app!"></div>
and reference it from Vue like this:
this.$refs['test ** app!']
In short, no, it's not a bug but no, automatic kebab-case conversion no longer takes place.
Regarding Variable Substitution in Dojo
Variable Substitution:
A template can have values set on DOM rendering
though the use of a simple variable placeholder syntax, which looks
like this:
${property}
According to the documentation
Variable substitution in a template is only recommended for values
that will not be changed during the lifetime of the widget. In other
words, if you expect to be able to set the value of a property in a
widget during the lifetime of your application programmatically, we
recommend instead using your widget's postCreate method to set any
variables programmatically through your widget's set() method.
Can someone explain why this recommendation is made?
Variable substitution in Dojo has no binding.
This mean it wont change even if you change the actual value of the variable.
If a binding is needed, then you can use an attach point and a setter for that value. It will then have a binding and the UI will be updated with the new value.
Something like this:
_setLabelAttr : {
node : "_tplLabelNode",
type : "innerHTML"
},
Will bind the innerHTML of attach point _tplLabelNode to the "label" property of the widget.
So widget.set('label', 'foo'); will update the UI.
However <div>${label}</div> has no bind. ${label} will be replaced at creation of the widget and will never be updated
I have an input field with the value field being passed a string stored in Vuex.
The input fields changes are debounced and the new string synced to Vuex.
When bound like this :value="vuexState.myString, when typing, the cursor jumps to the end of the line.
When bound like this value={{vuexState.myString}}, the cursor stays where it is.
According to the guide: http://vuejs.org/guide/syntax.html#Arguments
These two should be the same, with the {{ }} style being internally converted to :bind. Could this be a bug?
My theory is that the cursor jumping occurs because the vuex state change re-renders the input and that the {{ }} style is interpolated only once while the binding syntax re-renders the input every change.
I am currently using value={{vuexState.myString}} but I'd like to know what is happening or if there is a better way to do this.
It's in the documentation about Interpolation and has been deprecated (see. Migration guit from 1.x)
Deprecated
This is the old way
<div class="btn btn-primary hint--top {{class}}"></div>
Solution
Use Javascript expression instead:
<div v-bind:class="'btn btn-success hint--top '+ class "></div>
Take a look at the console, it seems like it has been deprecated in favour of the colon syntax or v-bind:
vue.js:2237 [Vue warn]: foo="{{foo}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.
v-text:'something' === {{something}}