String Object File instead of the actual object - javascript

So I am actually trying to give my my property named : ModalFile the object for any file to upload. Instead of receiving the object as normal I am receiving a string named "File" and when I click on it, it says ""[object File]". I have seen some people who told to give the parameter $event as a parameter to fix this but It didn't solve my problem.
export default {
name: 'Marketplace',
data() {
return {
ModalFileName: null,
};
},
onFileSelected(event) {
const data = event.target.files[0];
this.ModalFileName = data;
},
<input class="file-input" type="file" name="resume" #change="onFileSelected($event)">
Thank you

You are storing file object inside ModalFileName variable. Try this:
event.target.files[0].name
Working snippet:
new Vue({
el: '#app',
data() {
return {
ModalFileName: null,
};
},
methods: {
onFileSelected(event) {
this.ModalFileName = event.target.files[0].name;
console.clear();
console.log(this.ModalFileName)
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<input id='app' class="file-input" type="file" name="resume" #change="onFileSelected" />

Related

How to change v-model value from JS

I'm using Google autocomplete address form. I found example at google official web page. Everything is fine. Everything works! but it's native Javascript,
I have Vue application and I don't like how I change text input values from JS script. The idea is that when I change something in main input, JS event listener should change values for other inputs:
document.getElementById(addressType).value = val;
Problem is that I should use "document" to change values:
document.getElementById('street_number').value
I would like to have something like tat:
<input type="text" v-model="input.address" ref="addressRef">
And to read values:
export default {
data() {
return {
input: {
address: "",
...
}
};
},
methods: {
test() {
console.log(this.input.address);
console.log(this.$refs.addressRef);
}
}
So the question is:
How to set the value from JS code to update binding values? Right now values are null because I use "getElementById("id").value = val"
You can emit input event afterwards which v-model relies on for updating its value:
let el = document.getElementById("id");
el.value = val;
el.dispatchEvent(new Event('input'));
In action:
Vue.config.devtools = false
const app = new Vue({
el: '#app',
data: {
message: null
},
methods: {
updateBinding() {
let el = document.getElementById("input");
el.value = 'Hello!';
el.dispatchEvent(new Event('input'));
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="updateBinding">Click me </button><br>
<input id="input" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>

Display data in Vuejs

I need to display only name from request in my form, can't figure out how to do it. I'm just starting with js, need help.
I have tried this {{ request.name }} but doesn't work. {{request}} shows me full data.
const app = new Vue({
el:'#valuation-request',
data() {
return {
step:1,
request:{
name:null,
industry:'{{ $company->industry }}',
valuation_date:null,
similar_comp:null,
total_raised:null,
sales_transactions:null
}
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
}
}
});
If name has a value, it should display as you wrote it. If it's null, nothing will be displayed.
const app = new Vue({
el:'#valuation-request',
data() {
return {
step:1,
request:{
name: null,
industry:'{{ $company->industry }}',
valuation_date:null,
similar_comp:null,
total_raised:null,
sales_transactions:null
}
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="valuation-request">
{{request.name}}
<hr>
Name: <input type="text" class="uk-input" name="name" v-model="request.name" id="name" placeholder="e.g. John Doe" required>
</div>

How to pass from a component to the parent a radio button choice?

I am trying to replicate the parent-child communication in components. The idea is to have a two-choice component based on radio buttons, reused several times:
Vue.component('chooser', {
template: '<form> <input type="radio" value="hello" v-model="picked"> Hello<br><input type="radio" value="world" v-model="picked"> World<br></form>',
data: function() {
return {
picked: null
}
},
watch: {
picked: function() {
this.$emit('picked')
}
}
})
var vm = new Vue({
el: "#root",
data: {
first: null,
second: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
<chooser v-model="first"></chooser>
Here I want to get choice one: {{first}}
<chooser v-model="second"></chooser>
Here I want to get choice two: {{second}}
</div>
I do not get the information from the component back to the parent, why?
You are not using the $emit function correctly. To emulate v-model, you should emit an event of type 'input' (first argument) and the corresponding value (second argument).
Vue.component('chooser', {
template: '<form> <input type="radio" value="hello" v-model="picked"> Hello<br><input type="radio" value="world" v-model="picked"> World<br></form>',
data: function() {
return {
picked: null
}
},
watch: {
picked: function() {
this.$emit('input', this.picked);
}
}
})
var vm = new Vue({
el: "#root",
data: {
first: null,
second: null
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
<chooser v-model="first"></chooser>
Here I want to get choice one: {{first}}
<chooser v-model="second"></chooser>
Here I want to get choice two: {{second}}
</div>

VueJS v-model value in to another input

I have two inputs, first:
<input v-model="from_amount" id="from_amount" type="text" class="form-control" name="from_amount">
And the second:
<input id="from_amount" type="text" class="form-control" name="to_amount" value="#{{ from_amount }}">
If i type number in from_amount it should be outputted in to_amount
Here's my VueJS code:
var request = new Vue({
el: '#request-creator',
data: {
from_amount: '',
to_amount: ''
},
computed: {
calculate: function() {
return (this.from_amount * 750) / 0.00024
}
}
})
But seems like it's impossible to do with Vue?
You need to use v-bind, to bind computed property to an input field like following:
<input id="from_amount" type="text" class="form-control" name="to_amount" v-bind:value="calculatedFromAmount">
or in short, you can also write
... :value="calculatedFromAmount">
See Working fiddle: http://jsfiddle.net/bvr9754h/
You have to define computed property like following in due component:
computed: {
calculatedFromAmount: function() {
return (this.from_amount * 750) / 0.00024
}
}
it's very possible.
Modify your code so that to_amount is the name of the computed property :
var request = new Vue({
el: '#request-creator',
data: {
from_amount: '',
},
computed: {
to_amount: function() {
return (this.from_amount * 750) / 0.00024
}
}
})
and the html to :
<input id="from_amount" type="text" class="form-control" name="to_amount" :value="to_amount">

Keeping track of added element in an array?

I'm playing around with vue.js and the .vue components, and as newbie, I'm wondering how can I keep track of the element I add in the array.
The situation is the following :
The user add a new element from a form
When he submit, the data are automatically added to a ul>li element, and a POST request is made to the API
When the POST is done, I want to update the specific li with the new data from the server.
The thing is, I can not target the last li because the server can take time to process the request (he do a lot of work), so the user may have added 1, 5, 10 other entries in the meantime.
So how can I do ?
Here's my code so far :
<template>
<form method="post" v-on:submit.prevent="search">
<input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" />
<input type="text" placeholder="Company" required v-model="company" v-el="domainInput" />
<input type="submit" value="Search" class="btn show-m" />
</form>
<ul>
<li transition="expand" v-for="contact in contacts">
<img v-bind:src="contact.avatar_url" width="40px" height="40px" class="cl-avatar" />
<div class="cl-user">
<strong class="cl-name">{{contact.name}} <span class="cl-company">{{contact.company}}</span></strong>
</div>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
contacts: [],
name: null,
company: null
}
},
methods: {
search: function (event) {
this.$http.post('/search', {
name: this.name,
company: this.company
}).then(function (xhr) {
// HERE ! How can I target the exact entry ?
this.contacts.unshift(xhr.data)
})
this.name = ''
this.company = ''
this.contacts.unshift({'name': this.name, 'company': this.company})
},
}
}
</script>
Thank you for your help ! :)
If you know that the name and company fields are unique you could search through the array to find it... otherwise you can just wait to append it to the array until the return function:
search: function (event) {
this.$http.post('/search', {
name: this.name,
company: this.company
}).then(function (xhr) {
this.contacts.unshift(xhr.data)
})
this.name = ''
this.company = ''
},
I finally found a working solution : I use a component instead of <li /> for each entries, and manage the state of these inside the component :
<ul>
<contact-entry v-for="contact in contacts" v-bind:contact="contact"></contact-entry>
</ul>
That way, when I add a new entry in the array (described above), a new instance of the component contact-entry is made.
Inside that component, I did the following :
<script>
export default {
props: ['contact'],
created: function () {
if (this.contact.id === undefined) { // If it's a new contact
this.$http.post('search/name', { // I do the post here
name: this.contact.name,
domain: this.contact.company.name
}).then(function (xhr) {
this.contact = xhr.data // This will update the data once the server has replied, without hassle to find the correct line
})
}
}
}
</script>
That's it ! :) In the parent's component, I removed the xhr request and simplified the method to :
<script>
export default {
data () {
return {
contacts: [],
name: null,
company: null
}
},
methods: {
search: function (event) {
this.name = ''
this.company = ''
this.contacts.unshift({'name': this.name, 'company': this.company})
}
}
}
</script>

Categories

Resources