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"
Related
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')
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
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.