Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Jaydson Gomes jaydson

🏠
Working from home
View GitHub Profile
View gist:ba1e0146c1f5c21dc04424b6338d8d79
# create the project
mkdir my-app
cd my-app
npm init svelte@next
# install dependencies
npm install
# start dev server and open a browser tab
npm run dev -- --open
View custom-input-10.js
<!-- CustomInput.vue -->
<template>
<label>
{{ label }}
<input type="text" :name="name" :value="value" @input="onInput" @change="onChange" />
</label>
</template>
<script>
export default {
View custom-input-9.js
<!-- CustomInput.vue -->
<template>
<label>
{{ label }}
<input type="text" :name="name" v-model="model" />
</label>
</template>
<script>
export default {
View custom-input-8.js
<!-- CustomInput.vue -->
<template>
...
<input type="text" :name="name" v-model="model" />
...
</template>
<script>
...
computed: {
View custom-input-7.js
<!-- CustomInput.vue -->
...
<script>
...
watch: {
value: {
handler(value) {
if (value) {
this.error = '';
}
View custom-input-6.js
<!-- CustomInput.vue -->
<template>
...
<p v-if="error">{{ error }}</p>
...
</template>
<script>
...
data() {
View custom-input-5.js
<!-- CustomInput.vue -->
<template>
...
<input type="text" :name="name" :value="value" @input="onInput" />
...
</template>
<script>
...
methods: {
View custom-input-4.js
<!-- CustomInput.vue -->
<template>
<label>
{{ label }}
<input type="text" :name="name" :value="value" @input="$emit('input', $event.target.value)" />
</label>
</template>
<script>
export default {
View custom-input-3.js
<!-- App.vue -->
<template>
<custom-input :label="label" :value="model" />
</template>
...
View custom-input-2.js
<!-- CustomInput.vue -->
<template>
<label>
{{ label }}
<input type="text" :name="name" v-model="value" />
</label>
</template>
<script>
export default {