So I'm using Vue with the template written in Pug and I'd like to use a bit of CoffeeScript in the Pug markdown.
Something like this:
input( v-model.trim="#[:coffee-script user?.details?.last_name]" type="text" placeholder="Last name")
... since user, details and last_name are not guarenteed to exist and I'd like to use Coffee's existential chaining.
But I get an invalid expression: Invalid or unexpected token in #[:coffee-script user?.details?.last_name] error.
I also tried input( v-model.trim=":coffee-script user?.details?.last_name" type="text" placeholder="Email address") to no avail.
Is this possible? If not, is there another, short way of guarding against undefined values?
PS: I did npm install —save jstransformer-coffee-script
Related
I continues migrate to vue 3.
In vue 2 i use method by #pbastowski for add modifiers by condition for input
<input type="text" v-model="filter" #[isOpen&&click.stop] />
how can i do in vue 3 it ?
I don't think there's anything special for Vue3. Just check the condition, then make the method call
<input type="text" v-model="filter" #click.stop="isOpen && yourMethodCall($event)" />
oh i find problem thx #j-titus.
my question was that old syntax dont work in vue 3
i havent my handler
if i try
#click.stop="isOpen"
i receive error
runtime-core.esm-bundler.js:218 Uncaught TypeError: $setup.isOpen is not a function
but its work without error:
#click.stop="isOpen == true"
My HTML fragment is:
<label class="email">
Email
<input data-test="email" type="text" v-model="curMember.email_address">
</label>
Then in my cypress test the following 'GET' does not work (using attribute selector):
cy.get('[data-test="email"]').should('have.value', 'a#test.com')
the above times out trying to find the element but the folowing does work (using a class selector)
cy.get('.email>input').should('have.value', 'a#test.com')
Can anyone tell me what my problem is?
I am not sure that cypress provides of getting value from NON-class
but take a look at this https://docs.cypress.io/api/commands/get.html#Selector
for the first example, you can only check the length
cy.get('[data-test="email"]').should('have.length', '10')
I am dabbling with a Role based access situation and am sort of stuck on the assertion.
For the Full Access the field is like so
<input class="clickable_input clickable_timeholder ui-autocomplete-input ui-widget ui-widget-content ui-corner-left hidden" data-old-value="12:00 am" type="text" value="12:00 am" name="program_constraint[event_window_constraints_attributes][0][local_start_time]" id="program_constraint_event_window_constraints_attributes_0_local_start_time" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
For the Readonly access the field is like so
<input class="hidden clickable_input clickable_timeholder" data-old-value="12:00 am" type="text" value="12:00 am" name="program_constraint[event_window_constraints_attributes][0][local_start_time]" id="program_constraint_event_window_constraints_attributes_0_local_start_time"></input>
I would like to work with only 1 selector that is the one with the full access and then check for exists or not to pass or fail the case.
I end up with the below assertion error primarily because both the conditions use the same ID and the only difference is in their class name. I have not found a good example yet to handle this. Being still a week old into working w/TestCafe, I understand the DOM model perfectly fine, I can't seem to quite incorporate this into a page model effectively and keep hitting a wall.
expected true to be falsy
This is my Selector definition in the page model:
this.eventWindowStartTime = Selector("#program_constraint_event_window_constraints_attributes_0_local_start_time")
my Test code for the assertion
await t.expect(programOptionsConstraintsPage.eventWindowStartTime.exists).notOk()
You can use the filter method to find only an element with a particular css class.
For example:
Selector('#input_id').filter('.ui-widget')
I have a variety of HTML select elements inside of Nuxt.js. I'm also using Vuelidate for validation and this is working as expected. This is a typical select box in my form:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="{error: appendErrorClass($v.form.location)}"
>
<option :value="null" hidden>Choose...</option>
<option
v-for="(item, index) in $store.state.quotes.data.practiceStates"
:key="index"
:value="item.data">
{{item.display}}
</option>
</select>
Before selecting any of the options, I'm noticing the following on all select fields.
I've tried removing any Vue magic on a test select field to see if the same results happen.
<select id="location1" name="location1">
<option value="" hidden>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
Still seeing valid: true. Is there anything I'm overlooking that would cause the validity to default to true? Thanks in advance for any help or guidance on this issue.
UPDATE For Clarification:
Vuelidate validation works just fine. The issue I'm dealing with is the select field property Validity.validate. I only mention Vuelidate to give full context.
HTML Select is a sort of "strange" form element in that validity is typically checking to see if there's a readable value. Since a select always has something picked, it validates...
This is different from say a telephone input that has a specific pattern required to be valid.
I haven't used Vuelidate specifically, but I read the docs as saying, if you left the v-model="form.location" there's a good chance it's simply validating that a value exists so Any selcted item would qualify.
In my original post, I referenced the dynamic style based on the vuelidate library: :class="{error: appendErrorClass($v.form.location)}"
#PierreSaid responded to this post and later deleted his/her reply. Turns out, his response was helpful in pointing me to some Vuelidate attributes that were able to assist in a workaround for my issue. Thank you, PierreSaid.
I have since updated that dynamic class to be a mixin that looks like this:
export default {
methods: {
appendErrorAndValidityClass(field) {
return {
error: field.$error,
invalid: field.$invalid,
};
}
}
};
After importing the mixin into the Vue partial, my select box looks like this:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="appendErrorAndValidityClass($v.form.location)"
>
This appends a class of invalid when the select field has not been updated. It also updates the error style accordingly. Now, I can assign styles for when the select field has an invalid class. This solves the overall issue for me. Thanks for your help PierreSaid and Bryce.
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