I have created a basic app with Ionic + Nuxt.js, and using some of the ion-components. But the components don't seem to have their normal behavior. Using v-model, doesn't sync the data to the data function.
IE:
<ion-item>
<input v-model="email" type="email" name="email"> <<< WORKS
<ion-label position="floating">Email Address {{ email }}</ion-label>
<ion-input v-model="email" type="email" name="email"></ion-input> <<< DOES NOT
</ion-item>
data () {
return {
email: '',
password: '',
error: null
}
},
Some more scope of this ion-item is wrapped in ion-app / ion-grid / row-cols. Also, running the latest versions of all (2021/05/18).
Any help would be greatly appreciated.
I dont know if you use Ionic 5. When you use Ionic 5 and Vue 3 your solution should work.
BUT when you use Ionic 4 you need to use #IonChange=""
and check that you importet IonInput correct.
Related
im working on a nuxt project and im using vuetify as a UI framework.
i tried using v-otp-input but i get this error in my console.
all the vuetify elements are working fine but this one doesn't , what should i do ?
here is my code
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
ps:im looking for somthing like this:
Any help would be appreciated
that was because of vuetify version (vuetify version must be 2.6.0 or higher)
for updating vuetify:
1.Run npm info vuetify to lookup for the list of versions that they have.
npm info vuetify
2.install the specific version that you want with the following
for example:
npm install --save vuetify#2.6.6
You can use Vuetify <v-opt-input> component and override a bit its css for your needs.
<v-otp-input
length="6"
plain
type="number"
></v-otp-input>
To edit the css style of the component, it's not an easy task as you have to check on the browser debugger what are the classes applied to the component and what elements it includes.
But it's doable :)
Assuming you are using the last Vuetify version (2.6.6) you have to wrap your page or your layout into a component: https://vuetifyjs.com/en/api/v-app/
<template>
<v-app>
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
</v-app>
</template>
I had the same problem, using vuetify v2.6.9, with vue-cli-plugin vuetify. I tried manually importing the component in my component and it worked:
<template>
<v-otp-input
class="
font-weight-bold
text-uppercase
btn-primary
bg-gradient-primary
py-2
px-6
me-2
mt-7
mb-2
w-100
"
color="#5e72e4"
v-model="otp"
:disabled="loading"
#finish="onFinish"
></v-otp-input>
</template>
<script>
import { VOtpInput } from "vuetify/lib";
export default {
name: "sign-up-verify",
components: { VOtpInput },
}
</script>
hello my project is laravel project, that use ineritaljs as frontend middleware. and text fields binded to to data() functions variables.
<div class="form--group">
<label for="order_details_fname">Recipient’s FirstName *</label>
<input
id="order_details_fname"
type="text"
class="form--controll"
v-model="order_data.first_name"
/>
<div class="form--group">
<label for=""
>Recipient’s Last Name *</label>
<input
id="order_details_lname"
type="text"
class="form--controll"
v-model="order_data.last_name"/>
</div>
data function
data() {
return {
order_data:{
/** */
first_name:null,
last_name:null,
/** */
},
}
},
sometimes fields not editable, (just like read-only fileds) is anyone know solutions for this?
Hi all i just found issue for this. its not vuejs issue, but in a npm package (vue-range-slider) . it register global events to capture input. i'm still wandering why package owner not trying to fix it.
anyway if anyone had this kind of issue please check
https://github.com/xwpongithub/vue-range-slider/issues/18
https://github.com/xwpongithub/vue-range-slider/issues/21
thank you all. peace
Vue version 2.6.10
I'll try writing in the code that gives the relevant information to prevent this from being huge
this is part of my component that has to do with select boxes
<div class="input-field">
<input
:id="name"
v-model="searchFilter"
type="text"
tabindex="-1"
:class="{ searchbar: true, 'validation-error': validateError }"
autocomplete="off"
spellcheck="false"
:disabled="disabled || loading"
:readonly="single"
:placeholder="placeholder"
#click="openList"
/>
<input-icon :loading="loading"></input-icon>
</div>
this is the computed part which does the placeholder part
computed: {
placeholder() {
if (this.single) {
const selected = this.singleList.filter(item => item.selected === true).shift();
return selected === undefined ? `Select ${_.startCase(this.name)}` : selected.name;
}
},
},
The issue is, that lets say I've got 3 instances of this component running?
once I choose one of them? the rest change their UI (aka placeholder value)
This is strictly a ui problem since I can tell that the value stays the same but I can't seem to find a way to access that value in order to show it.
I hope this is enough information to go on
Will provide additional code if needed.
Thanks in advance.
I would like to be able to dynamically change the type of an input field between text and password. I tried doing the following:
<input :type="dynamicInputType">
data() {
return {
dynamicInputType: 'password'
}
}
But apparently this doesn't work; vuejs displays the error: v-model does not support dynamic input types. Use v-if branches instead.
It's not clear to me how I can fix this with v-if.
This kind of thing is what's being suggested.
<input v-if="'text' === dynamicInputType" type="text">
<input v-else type="password">
I've done a couple of projects with React in the last year and I've switched to Vue for my current one, attracted by its greater simplicity, less verbose nature and the fact that you don't have to transpile your code to work, so it's easier to get going with and more flexible (well, to be accurate you don't have to transpile with React either, there's no need to use JSX, but it loses one of its great benefits if you don't).
Anyway, one of the things I'm missing from React (and I'm sure it's just ignorance of the Vue way which is my problem) is a way of reusing a fragment of code to avoid repeating myself in templates. The specific situation which prompted this question was a template where I have a custom input element like this:
<input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled" #input="handleInput"/>
In certain situations I'd want to wrap it in a div, otherwise I'd want to use it as is. With React, I'd simply store it in a variable, something like this:
var inp=( <input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled"
#input="handleInput"/>);
Then I could do something like the following:
var myInput;
if(divSituation){
myInput=(<div>{inp}</div>);
} else {
myInput=inp;
}
Then I could use the myInput var. The Vue logic doesn't seem to allow this, though. Unless, of course, using JSX within Vue would allow me to do the very same thing? I currently have for this in Vue something like the following, which offends me:
<template v-if="divSituation">
<div><input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled" #input="handleInput"/></div>
</template>
<template v-else>
<input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled" #input="handleInput"/
</template>
You can create vue components for re-usable components, which can be used as par requirement.
You can find an example of re-usable input component in vue docs:
<currency-input v-model="price"></currency-input>
and you can write that as re-usable component like following:
Vue.component('currency-input', {
template: '\
<span>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
</span>\
',
props: ['value'],
methods: {
// Instead of updating the value directly, this
// method is used to format and place constraints
// on the input's value
updateValue: function (value) {
var formattedValue = value
// Remove whitespace on either side
.trim()
// Shorten to 2 decimal places
.slice(0, value.indexOf('.') + 3)
// If the value was not already normalized,
// manually override it to conform
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// Emit the number value through the input event
this.$emit('input', Number(formattedValue))
}
}
})
You can add more props for readonly, disabled, etc.
You can also have a look at custom input elements of element-ui and it's code.
Given the example you have given, You can use v-html more efficiently. with v-html, you can pass a HTML string which will be rendered as HTML. However Note: the contents are inserted as plain HTML - they will not be compiled as Vue templates.
You can have a computed property, which will return HTML string as par your variable: divSituation, like following:
var data = {
templateInput: '<input ref="input" :id="name" :name="name" :type="fieldType" class="form-control" :value="value" :readonly="readonly" :disabled="disabled" #input="handleInput"/>',
divSituation: true,
myInput: ''
}
var demo = new Vue({
el: '#demo',
data: function(){
return data
},
computed: {
getMyInput: function(){
if(this.divSituation){
return this.templateInput
}
else{
return '<div>' + this.templateInput + '</div>'
}
}
}
})
Now you can just render myInput in HTML using v-html like this:
<div id="demo">
<div v-html="getMyInput">
</div>
</div>
check out working fiddle.