TLDR; In v2, this.$refs does the job but how can I do that in v3 composition api?
I am trying to use CustomUpload feature of PrimeVue in Vue3, but that API does not clear the upload files after uploading them and I need to call clear() method of the child component in the parent component to clear the files and refresh the button.
Here's my App.vue
<template>
<FileUpload
name="upload"
url="/"
mode="basic"
:auto="true"
:maxFileSize="26214400"
:fileLimit="1"
:customUpload="true"
#uploader="upload"
/>
<Button name="lalaal">qweeq</Button>
</template>
<script>
import FileUpload from 'primevue/fileupload'
export default {
setup() {
const upload = e => {
console.log('testing', e)
}
return { upload }
},
components: {
FileUpload
}
}
</script>
Thanks
You could use template ref then use uploadFile.value instead of this.$refs.uploadFile :
<template>
<FileUpload
ref="uploadFile"
name="upload"
url="/"
mode="basic"
:auto="true"
:maxFileSize="26214400"
:fileLimit="1"
:customUpload="true"
#uploader="upload"
/>
<Button name="lalaal">qweeq</Button>
</template>
<script>
import FileUpload from 'primevue/fileupload'
import {ref} from "vue";
export default {
setup() {
const uploadFile=ref(null)
const upload = e => {
console.log('testing', e)
}
return { upload,uploadFile}
},
components: {
FileUpload
}
}
</script>
Related
new to vue and iconify here.
I'm trying to use icons from #iconify/vue using Composition API but it is not working
here's what I have
File.ts
import { Icon } from "#iconify/vue";
export default defineComponent({
setup() {
return { Icon };
},
});
File.vue
<template>
<div>
<Icon icon="logos:stackoverflow-icon" width="20" :inline="true" />
</div>
</template>
<script lang="ts" src="./File.ts"></script>
On the other hand if I put in a single file it works just fine
allTogether.vue
<template>
<div>
<Icon icon="logos:stackoverflow-icon" width="20" :inline="true" />
</div>
</template>
<script setup lang="ts">
import { Icon } from "#iconify/vue";
</script>
Can someone please help me ?
When using the composition api without script setup (as you did in the external file, you need to use the top-level components option to register components.
import { Icon } from "#iconify/vue";
export default defineComponent({
components: {
Icon
},
setup() {
// Your logic code
}
})
I tried to use prueba.js in one of the components of my app (InputSwap.vue), in which there is a button ('console.log'). I want to use this file using that button, but the app showed me this error:
enter image description here
prueba.js let me see the data in the console by clicking the button.
The data was saved with window.localStorage:
window.localStorage.setItem('data_input', JSON.stringify(data));
where am I wrong?
prueba.js :
export default {
infoPrueba() {
var data = (JSON.parse(window.localStorage.getItem('data_input')))
console.log(data)
}
}
InputSwap.vue:
<template>
<div class="card-action">
<Button v-on:click="prueba()"
v-bind:style="{'margin-left' : '5px', background : '#52368c'}"
btext="Console.log" icon="code"
/>
</div>
</template>
<script>
import Button from './Button'
import * as prueba from './prueba.js' // I have prueba.js in components folder
export default {
name: 'InputSwap',
components: {Button},
methods: {
prueba: async function () {
prueba.infoPrueba()
},
},
}
</script>
Thanks to x-rw, I solved this problem:
I changed import * as prueba from './prueba.js' to import {infoPueba} from './prueba.js'
and I wrote this code in prueba.js:
export const infoPrueba = () => {
var data = (JSON.parse(window.localStorage.getItem('data_input')))
console.log(data)
}
I'm trying to get the array of element refs that are not in v-for. I'm using #nuxtjs/composition-api on Nuxt 2.
(Truth: I want to make an array of input elements, so that I can perform validations on them before submit)
This sounds too easy on vue 2 as $refs becomes an array when one or more compnents have the same ref name on html. However, this doesn't sound simple with composition api and trying to perform simple task with that got me stuck from long.
So to handle this scenario, I've created 1 composable function. (Soruce: https://v3-migration.vuejs.org/breaking-changes/array-refs.html#frontmatter-title)
// file: viewRefs.js
import { onBeforeUpdate, onUpdated } from '#nuxtjs/composition-api'
export default () => {
let itemRefs = []
const setItemRef = el => {
console.log('adding item ref')
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
itemRefs,
setItemRef
}
}
Here is my vue file:
<template>
<div>
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
// rest of my cool html
</div>
</template>
<script>
import {
defineComponent,
reactive,
useRouter,
ref
} from '#nuxtjs/composition-api'
import viewRefs from '~/composables/viewRefs'
export default defineComponent({
setup() {
const input = viewRefs()
// awesome vue code here...
return {
input
}
}
})
</script>
Now when I run this file, I don't see any adding item ref logs. And on click of a button, I'm logging input. That has 0 items in the itemRefs array.
What's going wrong?
Nuxt 2 is based on Vue 2, which only accepts strings for the ref attribute. The docs you linked actually refer to new behavior in Vue 3 for ref, where functions are also accepted.
Template refs in Nuxt 2 work the same way as they do in Vue 2 with Composition API: When a ref is inside a v-for, the ref becomes an array:
<template>
<div id="app">
<button #click="logRefs">Log refs</button>
<input v-for="i in 4" :key="i" ref="itemRef" />
</div>
</template>
<script>
import { ref } from '#vue/composition-api'
export default {
setup() {
const itemRef = ref(null)
return {
itemRef,
logRefs() {
console.log(itemRef.value) // => array of inputs
},
}
}
}
</script>
demo
And setup() does not provide access to $refs, as template refs must be explicitly declared as reactive refs in Composition API.
I want a review button on image, but I don't find attribute.
I set the imagePreviewMarkupShow = true but it didn't work.
Package here
My Template
<template>
<div id="app">
<file-pond
name="test"
ref="pond"
max-files="4"
label-idle="Drop files here..."
:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
:files="myFiles"
v-on:init="handleFilePondInit"
allowImagePreview ="false"
/>
</div>
</template>
My Script
import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay';
// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageOverlay);
export default {
name: 'app',
data: function() {
return { myFiles: [] };
},
methods: {
handleFilePondInit: function() {
console.log('FilePond has initialized');
// this.$refs.pond.getFiles();
// FilePond instance methods are available on `this.$refs.pond`
}
},
components: {
FilePond
}
};
How do I add that button?
I was also struggling with this problem.
The solution is to import CSS.
import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.min.css'
This is not mentioned in Github.
I have a few forms. Every of them have the same logic (validation, sending...) so, I want to create one method to control actions on my forms. For now my code is redundancy, because I have the same methods onSubmit() on every .vue file.
my HTML:
<div id="app">
<myform-one></myform-one>
<myform-two></myform-two>
</div>
my JavaScript (main.js - entry file in webpack):
import Vue from 'vue';
import Myform1 from './myform1.vue';
import Myform2 from './myform2.vue';
new Vue({
el: '#app',
components: {
myformOne: Myform1,
myformTwo: Myform2
}
});
and VUE components files:
myform1.vue:
<template>
<div>
<form #submit.prevent="onSubmit">
<input type="text" v-model="fields.fname11" />
<input type="text" v-model="fields.fname12" />
<button type="submit">submit</button>
</form>
</div>
</template>
<script>
let formfields = {
fname11: '',
fname12: ''
};
export default {
data() {
return {
fields: formfields
}
},
methods: {
onSubmit() {
// code responsible for reading, validating and sending data here
// ...
console.log(this.fields);
}
},
}
</script>
and myform2.vue:
<template>
<div>
<form #submit.prevent="onSubmit">
<input type="text" v-model="fields.fname21" />
<input type="text" v-model="fields.fname22" />
<input type="text" v-model="fields.fname23" />
<button type="submit">submit</button>
</form>
</div>
</template>
<script>
let formfields = {
fname21: '',
fname22: '',
fname23: '',
};
export default {
data() {
return {
fields: formfields
}
},
methods: {
onSubmit() {
// code responsible for reading, validating and sending data here
// ...
console.log(this.fields);
}
},
}
</script>
How can I create and use one, common method submitForm()? And where its code should be (good practice)?
Create a separate file which contains the logic:
// submitForm.js
export default function (fields) {
// code responsible for reading, validating and sending data here
// ...
}
Then use that logic inside the components
import submitForm from "../services/submitForm.js"
...
methods: {
onSubmit() {
submitForm(this.fields)
}
}
Vue3 (with Quasar for me but I'm sure it would work for any framework):
Say you have a parent which contains a number of forms <Forms />:
First create a composable function like so useForms.js:
import { ref } from 'vue'
const forms = ref([])
export function useForms(){
const checkForms = () => {
forms.value.forEach((form) => form.validate()
}
const addFormToFormsArray = (form) => {
forms.value.push(form)
}
return { forms, addFormToFormsArray, checkForms }
}
Then import it into <Forms />:
<template>
<Form />
<Form />
<Form />
<button #click="checkForms">Check Form</button>
</template>
<script setup>
import { useForms } from '../useForms';
const { checkForms } = useForms()
</script>
Finally, inside the <Form />:
<template>
<form ref="form">
.../stuff
</form>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useForms } from '../useForms';
const form = ref(null)
onMounted(() => {
addFormToFormsArray(form.value)
})
const { checkForms, addFormToFormsArray } = useForms()
</script>
When performing the check function in the parent, it should go through each form and check for any issues.
There are some options. My favorite is creating a mixin vue docs mixins
export const form_functionality = {
methods: {
on_submit() {
//logic of submit
},
//here we can have other reusable methods
}
}
Then in your components use that mixin as follow:
import { form_functionality } from 'path_of_mixin'
export default {
mixins: [form_functionality]
}
In the end, what mixins has (created, methods, data etc) will be merged to the component
which uses that mixin.
So, practically you can access the mixin method like this.on_submit()