Two equal examples (according to Vue.js) work differently:
First
<input v-model="value" #input.once="setDirty" type="text" id="object-email">
Second:
<input v-bind:value="value" v-on:input="value = $event.target.value"
#input.once="setDirty"
type="text"
id="object-email">
In the first example value changes only after second input, while the second example works correctly.
If we delete #input.once attribute, two examples will work fine.
P.S. Vue 2.4.0
This was a bug that was fixed in version 2.4.3.
As a workaround for previous versions, you can simply use #keydown.once="setDirty" instead of #input.once.
Related
I've been having trouble around finding elements by attribute/property. Following UI visible example:
<input tabindex="0" placeholder="www.stuff.com/example" type="text" id="sub-selector-37" class="form-control" value="">
The unique piece is the placeholder text.
I've tried the following:
And waitFor('input[placeholder=www.stuff.com/example]') - Error
And waitFor('input[placeholder="www.stuff.com/example"]') - Error
And waitFor('input[placeholder='www.stuff.com/example']') Finds nothing
Also tried a more direct input approach:
Then waitFor('{}Something else')
Then input('input[placeholder=www.stuff.com/example']', 'Stuff')
I'm hoping this is just good old PEBKAC on my part. Any suggestions would be greatly appreciated.
Here you go, use double-quotes and nest single-quotes:
And waitFor("input[placeholder='www.stuff.com/example']")
A tip: use the debugger and you can experiment with things like highlightAll('input') and narrow down what works: https://twitter.com/KarateDSL/status/1252817691963830272
On this page https://bootstrap-vue.js.org/docs/reference/validation/ of the documentation of bootstrap-vue, they are giving an example of how to use vee-validate.
However, their example doesn't work for me, because i get a warning saying [vee-validate] A field is missing a "name" or "data-vv-name" attribute. In deed, there is no name or data-vv-name attribute in their example and after adding one of them, it works like a charm.
Is this example outdated / wrong?
<b-form-input id="example-input-1" v-model="form.name" v-validate="{ required: true, min:2 }":state="validateState('form.name')" aria-describedby="input-1-live-feedback" placeholder="Enter name"enter code here></b-form-input>
The documentation has been updated to require name attribute and not v-model binding.
<input v-validate="'required|email'" type="email" name="email">
So Yes. this needs to be updated
With reference to the following Plunkr:
https://plnkr.co/edit/zbOBDEaWvn8Tw0F0O9cy?p=preview
The radio buttons are linked, because clicking 'Yes' checks both 'Yes' radio buttons, and checking 'No' checks both 'No' radio buttons.
In my data model, I have an array with two separate rows:
terms: [
{termBoolean: 'Yes'},
{termBoolean: 'No'}
]
How do I structure my code so that the rows are not linked, and I can check one 'Yes' and one 'No' at a time?
Edit: My original answer was incorrect. Your problem is due to the version of Vue you're using, i.e. version 1.0.26. In version 1 of Vue, there was no (term, index) syntactic sugar. Instead, index was accessed via the special property $index. My earlier answer was not applicable for this version of Vue.
To fix your current code, please make the following change:
<template v-for="term in terms">
<label>
<input type="radio" value="Yes" v-model="terms[$index].termBoolean" />Yes
<input type="radio" value="No" v-model="terms[$index].termBoolean" />No
</label><br>
</template>
Alternatively, upgrade to Vue 2.x. If you choose to go this route, please review the migration guide.
<template v-for="(index, term) in terms">
EDIT : think you misordered the index and the term.
I'm stuck with a Yii 1 implementation that has a CJuiDatePicker. I notice it creates <input type="text"> but I want it to create a <input type="date">. Is this possible?
I tried using htmlOptions to set it but that didn't seem to make a difference.
I've created a DateTextBox like:
<input dojoType="dijit.form.DateTextBox" constraints="{max: Date.now()}" id="startDate" />
When the page loads there is no value in the field. I would like the value to default to today. Is there a way to handle this? I know I could use the "value" attribute and set it in the declaration, but that only allows me to put a static date in the field, not a dynamic date.
It would also be good if the solution works with a form reset too.
Thanks for the help!
The parser supports the "now" keyword, so you could do:
<input dojoType=dijit.form.DateTextBox value="now">
Of course, for programmatic creation you would simply do:
new dijit.form.DateTextBox({value: new Date()})
Your solution:
<input dojoType=dijit.form.DateTextBox value="now">
If you want to make the date other than today:
<input dojoType=dijit.form.DateTextBox value="now" constraints="{max: new Date()}">