I'm trying to post data (in a Vue application). There is also an image file input in the form. All tutorials and answers are just telling to send the file alone or with other files.[1][2]
What I want to do is to append the file to the existing object that I create with v-model bindings.
// Vue
<template>
<input name="title" type="text" v-model="newPost.title" />
<textarea name="content" v-model="newPost.content"></textarea>
<input name="image" type="file" />
</template>
<script>
...
newPost: {
title: null,
image: null,
content: null
}
...
addNewPost() {
axios.post('/api/posts', this.newPost)
}
</script>
How should I do this?
You can use Base64 encode in client side and add the encoded string to your post request and decode from server side:
image here will be the encoded string an you can send axios request as you wrote.
You cannot mount the selected file with v-model. Since the file is a constantly changing element, you should use the #change and ref attribute.
<input name="image" type="file" #change="selectedPostImage" ref="postImage"/>
The following operation is performed in the function that captures the selected file.
selectedPostImage(){
this.newPost.image= this.$refs.postImage.files[0]
}
After these steps, you can send data with axios. Good codings..
Related
I am looking for a solution where I have a line something this
This line have {{input}} in it and also the {{select}} in it.
Now this line is coming from database from backend and my frontend is Vue JS 2.6
What I want to achieve is I want to parse the {{input}} and convert it into html input tag like
<input type="text" class="some-class">
and same for the {{select}}
<select> <option value="Option value">Option Content</option> </select>
I am not sure how I inject it in the vue I am using vue with vuex
Please guide my, Any help is appreciated
I don't know if I got that right, but you now have a template string that you need to use in your component. You can try to turn the template string into a component and then use it in the parent component.
Vue.component('my-input', {
template: '<input type="text" class="some-class">'
})
<div id="parent-demo">
<my-input></my-input>
</div>
If you only have a {{input}} string and need to convert it to a component, you can write your own conversion function to convert {{input}} to a template string(<input type="text" class="some-class">), and then create the component in the same way as above
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
I read on this docs : https://github.com/pqina/vue-filepond
I try to add like this :
<FilePond
allowMultiple="true"
accepted-file-types="image/jpg, image/jpeg, application/pdf"
maxFileSize="2MB"
required="true"/>
multiple, validation file type, max file works
But, required does not works
How can I solve this problem guys?
Using the v-bind:required prop works:
<form method="post" action="">
<file-pond v-bind:required="true"/>
<button type="submit">submit</button>
</form>
Related GitHub issue: https://github.com/pqina/vue-filepond/issues/138
We are iterating through a JSON object and setting the UI fields dynamically, using the tag. That works fine. However, there is one attribute in that JSON object, "value" that we wish to use to set the default value of those UI fields, such as a default text in a TextInput. What attribute should we set in the "component" tag to achieve this ? Appreciate your help in getting this done.
<div v-for="(form, index) in forms"
:key="index"
v-bind="form"
class="form__group">
<label class="form__label" v-model="form.label">{{ form.label }}</label>
<component :is="form.fieldType"
:currentField="form"
class="form__field">
</component>
</div>
The JSON node that is being passed to the component through ":currentField='form'" should be used to set the default value. Like this-
<el-input
type="text"
v-model="form.value">
</el-input>
<script>
export default {
name: 'TextInput',
props: ['form']
}
</script>
Thanks to #kitschmaster for directing my thoughts properly
I am just starting with Vue and Vuex and am wondering how to go about saving an entire form to an API. I have found this and it only seems like a good solution for a single field. Does this imply I would need to do a custom computed attribute with a getter and setter for each field in the form? I understand how data binding works well for local storage (which seems to be what most examples use) but updating a backend service with every keystroke seems like overkill.
What I would like to do is perform a single commit on a form when the user performs an action (like click a save button) and I feel like making a computed property or method for every field is not the right way to go.
Template:
<div v-show="isEditing" class="edit-view">
<form>
<div class="form-group">
<label>Title</label>
<input :value="item.title" type="text" class="form-control" #input="update" />
</div>
<div class="form-group">
<label>Description</label>
<input :value="item.description" type="text" class="form-control" #input="update" />
</div>
</form>
</div>
JS:
export default {
name: 'todo',
props: ['item'],
data() {
return {
isEditing: false
}
},
methods: {
showEdit() {
this.isEditing = true;
},
update() {
// Commit a change to vuex store
}
}
Keep the form data local to your form component. So define all form properties in data(). Apply v-model to all the input elements and your corresponding data properties. When user clicks submit, make a single commit with the form data.
This way, your form component will contain the edited values, and the vuex store will contain the submitted values.