I have a problem. I want to access to original value in input in gmap autocomplete component. Im new in vue 3 and I can't do it. What wrong is here?
<template>
<div class="location-input">
<GMapAutocomplete
class="search"
placeholder="Szukaj..."
ref="autocomplete"
#place_changed="onChange"
>
</GMapAutocomplete>
<font-awesome-icon icon="fa-solid fa-check" style="color: green;"/>
<font-awesome-icon icon="fa-solid fa-xmark" style="color: red;"/>
</div>
</template>
<script setup>
import {defineEmits, ref} from "vue";
let autocomplete = ref(null);
const onChange = async (value) => {
await new Promise(resolve => {
setTimeout(async () => {resolve()}, 1500)
})
// eslint-disable-next-line
console.info(autocomplete.input)
emit('change', value)
}
const emit = defineEmits(['change'])
</script>
GmapAutocomplete component templete:
<template>
<input ref="input" v-bind="$attrs" v-on="$attrs" />
</template>
Related
I'm doing a simple blog app to practice vue.js. I'm using composition API. I have stored data that get filled in in a form. This data I want to print out in another component homePosts where you can see the written blogpost with writer, headline and blogtext. I have used v-model, stored data to localStorage, in homePosts I have used v-for and {{ }} syntax to get data. But nothing shows in homePosts.
Can someone please see what im missing.
writePost.vue
<template>
<div>
<form class="form">
<label for="writer">Writer name: </label>
<input v-model="newWriter" type="text" max="500" />
<br />
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*" />
<br />
<label for="headline">Headline </label>
<input v-model="newHeadline" type="text" max="500" />
<label>Your blogtext: </label>
<textarea v-model="newNote" name="" id="" cols="30" rows="30"></textarea>
<button type="submit" #click="addNote" class="button"><router-link to="/homePosts" class="link">Post blog</router-link></button>
</form>
</div>
</template>
<script setup>
import { ref } from "vue";
const newNote = ref("");
const newWriter = ref("");
const newHeadline = ref("");
const notes = ref([]);
const addNote = () => {
notes.value.push({
id: Math.floor(Math.random() * 1000000),
text: newNote.value,
writer: newWriter.value,
headline: newHeadline.value,
});
addLocalStorage(notes)
};
const addLocalStorage = (notes) => {
localStorage.setItem("notes", JSON.stringify(notes))
JSON.parse(localStorage.getItem("notes"));
}
</script>
homePosts.vue
<template>
<div class="post-container">
<h1>Blog Posts</h1>
<div class="post-mini-container" >
<div class="post" v-for="note in notes" :key="note.id">
<!-- <img class="img-post" src="#/assets/person1.jpg"> -->
<p class="writer"> {{ note.writer }}</p>
<p class="headline"> {{ note.headline }}</p>
<p class="blog-text" > {{ note.text }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'homePosts'
}
</script>
You need to start your ref already parsing the existing items in your localStorage.
const notes = ref(JSON.parse(localStorage.getItem('notes') ?? '[]');
Or better yet, use a computed getter/setter:
const notes = computed({
get: () => JSON.parse(localStorage.getItem('notes') ?? '[]'),
set: (value) => {
localStorage.setItem('notes', JSON.stringify(value))
}
});
Or even better, take a look at vueUse/useLocalStorage 🎉
there are two approaches that you can follow, "event bus" or "pinia / vuex".
i'll explain how you can implement event bus
(you can check this post for inspiration: https://medium.com/#certosinolab/using-event-bus-in-vue-js-3-425aae8c21a6)
Add global event bus
install mit: npm install --save mitt
go to your main.ts / main.js and add the global property
import mitt from 'mitt';
const dispatcher = mitt();
const app = createApp(App);
app.config.globalProperties.dispatcher = dispatcher;
app.mount('#app');
update "script" content in writePost.vue component
<script setup>
import { ref , getCurrentInstance } from "vue";
const app = getCurrentInstance();
const dispatcher= app?.appContext.config.globalProperties.dispatcher;
const newNote = ref("");
const newWriter = ref("");
const newHeadline = ref("");
const notes = ref([]);
const addNote = () => {
notes.value.push({
id: Math.floor(Math.random() * 1000000),
text: newNote.value,
writer: newWriter.value,
headline: newHeadline.value,
});
// emit notes
dispatcher.emit("updateNotes" , notes);
addLocalStorage(notes)
};
const addLocalStorage = (notes) => {
localStorage.setItem("notes", JSON.stringify(notes))
JSON.parse(localStorage.getItem("notes"));
}
</script>
update "script" content in homePosts.vue component
<script>
export default {
name: 'homePosts',
data() {
return {notes: []}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem("notes") ?? "[]");
this.dispatcher.on("updateNotes" , (notes) => {
this.notes = notes ?? [];
})
},
beforeDestroy() {
this.dispatcher.off("updateNotes");
},
}
</script>
I am trying out the composition api in vueJs 3. Unfortunately I don't know how to include my mounted code in the setup(). When I put the code into the setup, the javascript tries to access the not yet rendered DOM. Can anyone tell me how I have to rewrite this?
Option api sytle (works)
<script>
export default {
name: "NavBar",
data() {
return {};
},
methods: {},
mounted() {
const bm = document.querySelector('#toggle');
const menu = document.querySelectorAll('nav ul li');
const overlay = document.querySelector('#overlay');
// ...
bm.addEventListener('click', () => {
bm.classList.toggle("active");
overlay.classList.toggle("open");
})
},
}
</script>
<template>
<header>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<!-- ... -->
</ul>
</nav>
</div>
</header>
</template>
First of all, this not a good practice to get a html element via document.querySelector(), see how to bind events in vue3
// bad
<div class="button_container" id="toggle">...</div>
mounted() {
const bm = document.querySelector('#toggle');
bm.addEventListener('click', () => {
bm.classList.toggle("active");
overlay.classList.toggle("open");
})
}
// good
<div class="button_container" id="toggle" #click="toggleContainer">...</div>
methods: {
toggleContainer() {
...
}
}
If you really want to document.querySelector() in setup()， you can use onMounted
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
const bm = document.querySelector('#toggle');
bm.addEventListener('click', () => {
bm.classList.toggle("active");
overlay.classList.toggle("open");
})
});
}
}
// or inside <script setup>
import { onMounted } from 'vue';
onMounted(() => {
....
});
But, just as #kissu commented, ref is a better way if you have to handle the html tag directly in vue
<div
ref="toggler">
...
</div>
<script setup>
import { ref, onMounted } from 'vue';
const toggler = ref(null);
onMounted(() => {
console.log(toggler.value) // <div></div>
});
</script>
But none of the above follow the concept of Vue, which is Vue is driven by data.
Since you seem to create a click event listener which will effect the class in html, here is the Vue way:
<template>
<header>
<div
class="button_container"
id="toggle"
:class="{
'active': isActiveBm
}"
#click="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div
class="overlay"
id="overlay"
:class="{
'open': isOpenOverlay
}">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<!-- ... -->
</ul>
</nav>
</div>
</header>
</template>
<script setup>
import { ref } from 'vue';
const isActiveBm = ref(false);
const isOpenOverlay = ref(false);
const toggle = () => {
isActiveBm.value = !isActiveBm.value;
isOpenOverlay.value = !isOpenOverlay.value;
}
</script>
I have a composable that takes a function and calls the function upon the long-press of a component that uses it(the composable). however, if I use it in a list of components, it seems to call the function on all the components instead of only the component/item I long-pressed in the list. How do I make it so that the function is only called on the target component/item?
The composable(/composables/useLongPress)
import { ref, onMounted, onUnmounted } from 'vue';
const longPress = (binding) => {
const isHeld = ref(false);
const activeHoldTimer = ref(null);
const onHoldStart = () => {
isHeld.value = true;
activeHoldTimer.value = setTimeout(() => {
if (isHeld.value) {
binding();
}
}, 1000);
};
const onHoldEnd = () => {
isHeld.value = false;
if (activeHoldTimer.value) {
clearTimeout(activeHoldTimer.value);
}
};
onMounted(() => {
window.addEventListener('mousedown', onHoldStart);
window.addEventListener('touchstart', onHoldStart);
window.addEventListener('click', onHoldEnd);
window.addEventListener('mouseout', onHoldEnd);
window.addEventListener('touchend', onHoldEnd);
window.addEventListener('touchcancel', onHoldEnd);
});
onUnmounted(() => {
window.removeEventListener('mousedown', onHoldStart);
window.removeEventListener('touchstart', onHoldStart);
window.removeEventListener('click', onHoldEnd);
window.removeEventListener('mouseout', onHoldEnd);
window.removeEventListener('touchend', onHoldEnd);
window.removeEventListener('touchcancel', onHoldEnd);
});
};
export default longPress;
The child component/item (/InvoiceListItem.vue)
<template>
<div class="grid grid-cols-2 py-4">
<div>
<p class="text-lg font-medium">{{ invoice.client }}</p>
<p class="mt-2 text-xs font-light text-gray-500">Due {{ invoice.due }}</p>
</div>
<div class="flex flex-col items-end">
<p class="text-lg font-bold">${{ invoice.amount }}</p>
<base-pill
:variant="invoice.status"
:label="capitalize(invoice.status)"
class="mt-2"
/>
</div>
</div>
</template>
<script setup>
import BasePill from '../../BasePill.vue';
import { capitalize } from '../../../utils';
import useLongPress from '../../../composables/useLongPress';
const props = defineProps({
invoice: {
type: Object,
required: true,
},
});
const log = () => console.log(props.invoice);
useLongPress(log);
</script>
<style lang="postcss" scoped></style>
The parent/list of components (/InvoiceList.vue)
<template>
<div class="divide-y">
<div v-for="(invoice, index) in invoices" :key="index">
<invoice-list-item :invoice="invoice" />
</div>
</div>
</template>
<script setup>
import InvoiceListItem from './InvoiceListItem.vue';
defineProps({
invoices: {
type: Array,
default: () => [],
},
});
</script>
<style lang="scss" scoped></style>
when I long press on one invoice item I am supposed to log the value of the one item but instead, I get the value of all items in the list
I have a button that needs to change it's icon when clicked in order to toggle between play and pause.
Here is a minimalistic sample of the code :
<template>
<div #click="toggleF">
<i v-if="toggleForce == true" class="fas fa-pause"></i>
<i v-if="toggleForce == false" class="fas fa-play"></i>
</div>
</template>
<script>
import {onMounted, onBeforeMount, ref} from 'vue'
export default {
setup(){
const toggleForce = ref(false)
function toggleF () {
toggleForce.value = !toggleForce.value
};
return {toggleF,toggleForce}
}
}
</script>
I get the following warning/error :
please try the code below:
demo 1
<template>
<div #click="toggleForce = !toggleForce">
<i v-if="toggleForce" class="fas fa-pause" />
<i v-else class="fas fa-play" />
</div>
</template>
<script setup>
import {ref} from 'vue'
const toggleForce = ref(false)
</script>
the <script setup> tag is available since the vue version 3.2 and will help you to clean up your script area
demo 2
const { ref, createApp } = Vue
createApp({
setup() {
const toggleForce = ref(false)
const toggleF = () => {
toggleForce.value = !toggleForce.value
}
return {
toggleForce,
toggleF
}
}
}).mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app">
<button #click="toggleF">toggleForce
<div v-if="toggleForce == true" class="fas fa-pause">TRUE</div>
<div v-if="toggleForce == false" class="fas fa-play">FALSE</div>
</button>
</div>
I am passing array as a prop to another component, and when I want to read this on mounted in that component, I got Proxy {}. How to read data from this prop? You can see in example when I want to console log prop, result is Proxy {}. I can see all values in HTML structure, but not in the console on mounted.
<template>
<div class="custom-select-container">
<div class="selected-item" #click="openSelect">
<span class="selected-items-text">{{ selectedItem.name }}</span>
<span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" />
</div>
<transition name="fade">
<ul v-show="options.length && showOptions" class="custom-select-options">
<li v-for="(option, index) in options" :key="index" class="custom-select-item">{{ option.name }}</li>
</ul>
</transition>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
props: {
options: {
type: Array,
default: () => []
}
},
setup(props) {
let showOptions = ref(false);
let selectedItem = ref(props.options[0])
const openSelect = () => {
showOptions.value = !showOptions.value
}
onMounted(() => {
console.log('test', props.options)
})
return {
openSelect,
showOptions,
selectedItem
}
}
}
</script>
Parent component where I am passing data:
<template>
<div class="page-container">
<div>
<div class="items-title">
<h3>List of categories</h3>
<span>({{ allCategories.length }})</span>
</div>
<div class="items-container">
<div class="item" v-for="(category, index) in allCategories" :key="index">
<span class="item-cell size-xs">{{ index + 1 }}.</span>
<span class="item-cell size-l">{{ category.name }}</span>
</div>
</div>
</div>
<custom-select
:options="allCategories"
/>
</div>
</template>
<script>
import CustomSelect from '../components/Input/CustomSelect'
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
components: {
CustomSelect
},
computed: {
},
setup() {
const store = useStore()
const allCategories = computed(() => store.getters['categories/getAllCategories'])
return {
allCategories
}
}
}
</script>
That's how reactivity works in Vue3.
use
console.log(JSON.parse(JSON.stringify(data))
or
console.log(JSON.stringify(data, null, 2))
to show the content of proxies in console