Comments (5)
Here you go (I left out the styling):
<template>
<div class="input" :class="{ 'is-active': active || hasValue, 'is-valid': hasValue && isValid, 'is-invalid': hasValue && !isValid }">
<label for="{{ id }}" class="input__label" @click="activate">{{ label }}</label>
<input id="{{ id }}" type="{{ type }}" class="input__input" required="{{ required }}" v-model="value" @focus="activate" @blur="deactivate"></input>
<div class="input__error" v-if="hasValue && !isValid" transition="input-error">{{ error }}</div>
<a href="#" class="input__helper" v-if="helper">This is a helper</a>
</div>
</template>
<script>
import { validate } from '../helpers'
export default {
props: {
id: {
type: String,
required: true
},
label: {
type: String,
required: true,
default: 'Label'
},
type: {
type: String,
default: 'text'
},
required: {
type: Boolean,
default: false
},
validation: {
type: String,
default: 'text'
},
error: {
type: String,
default: 'Please fill out this field correctly.'
}
},
methods: {
activate() {
this.active = true
},
deactivate() {
this.active = false
}
},
computed: {
hasValue() {
return this.value.length
},
isValid() {
let type = this.validation
let value = this.value
return validate(type, value)
}
},
data() {
return {
active: false,
value: '',
helper: false
}
}
}
</script>
from devtools.
But what does that component look like?
from devtools.
Hmm, kinda weird... it'd be best to have a repo that I can run actual code with. Need error stack info etc.
from devtools.
Unfortunately I'm under an NDA, so I can't share the repo.
Is there anything I can do on my end to help?
It's almost as if a certain listener is not removed correctly, as the formInput component was used in some previous state.
I basically have a <modal>
component that takes other ones like <form-input>
and <checkbox>
.
My <configure-location>
component uses <modal>
and <form-input>
. <configure-location>
is called initially and when done, a different component (<configurator>
) is called, which also uses <modal>
, but not <formInput>
.
Maybe something goes wrong when <modal>
is torn down?
Let me know if you want me to post the full error stack from the console.
from devtools.
Closing issue, if you have any more information on this issue please reopen. Is this still occuring for you?
from devtools.
Related Issues (20)
- Vue Devtools' detector-exec.js in combination with Cookiebot prevents DOMContentLoaded event? HOT 1
- Performance tab: Wrong timing shown on group
- Devtools Gets "Stuck", Doesn't Refresh on Browser Refresh HOT 12
- Unable to view event details in timeline
- Some component does not show the props panel. HOT 2
- Component State Not Updating HOT 3
- Cannot view AForm(from ant-design-vue) components details, showed me 'Select A Component' HOT 1
- If the base option is configured for Vite, open in editor will fail
- no funciona HOT 2
- README: Mention and link to devtools-next
- Multiple Vue apps mounted cause empty devtools on Chrome HOT 3
- Quickly open the closest parent component that can be opened in the editor.
- It is suspected that vue-devtools causes chrome memory overflow and then crashes HOT 11
- Vue3 chrome devtool not working when vite-plugin-vue-devtools node module is enabled HOT 2
- [PSA] Devtools Next for Vue 3 + Vite users HOT 1
- Pages: mishandling of navigation routes with regex pattern matching HOT 1
- Hotkeys for Vue DevTools HOT 1
- Add way to inspect the dependency chain of a piece of reactive state
- Vue Detected No Components Shown HOT 1
- Infinite loop bug. When the developer tools are closed, an infinite loop bug may occur. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from devtools.