Develop Reference

String Object File instead of the actual object

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" />

Vue dynamic calculation on input change

I want to calculate the earnings from share using vue. I'm subtracting the day closing amount to the start one. I'm not able to display the result on the Dom.
JSfiddle: https://jsfiddle.net/4bep87sf/
This is the code:
let app = new Vue({
el: '#app',
data: {
s: '',
e: '',
tot: '0'
},
watch: {
e: function(){
this.tot = (this.e + this.s);
return this.f;
}
});

Use a computed property:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
s: 0,
e: 0
}),
computed: {
tot() {
return Number(this.s) + Number(this.e);
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="s" type="number">
<input v-model="e" type="number">
<pre>{{s}} + {{e}} = {{tot}}</pre>
</div>
Also note you need to cast your values as Number() if you want the sum to be correct. If they're interpreted as strings a + b = ab.

Very close to tao answer. Only "fix" two User experience issues (Not directly related to Vue).
Issue 1: "030" or "30" ahhhh:
First, if you set a default value (0 for example), when the user focuses input and type "3" the output is 03! (or 30) ==> Very annoying (Especially on mobile).
Sometimes it's better to set the input value to null and show input placeholder (Fix this annoying issue).
Issue 2 (No meaning result):
The output 0 + 0 = 0 does not contribute too much to the user. Sometimes it's better to put the sum inside v-if.
<p v-if="number1 && number2">{{total}}</p>
Basic code example
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
number1: {
type: Number,
value: null,
placeholder: "Enter number 1",
},
number2: {
type: Number,
value: null,
placeholder: "Enter number 2",
}
}),
computed: {
total() {
return Number(this.number1.value) + Number(this.number2.value);
}
},
})
span{
color: red;
font-weight: bold
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3></h3>
<div>
<label>Number 1:</label>
<input autofocus v-model="number1.value" type="number" v-bind:placeholder="number1.placeholder">
</div>
<div>
<label>Number 2:</label>
<input v-model="number2.value" type="number" v-bind:placeholder="number2.placeholder">
</div>
<p>Total:<span v-if="number1.value && number2.value"> {{total}}</span></p>
</div>
v-model.lazy also sometimes useful for calucations:
By default, v-model syncs the input with the data after each input
event (with the exception of IME composition, as stated above). You
can add the lazy modifier to instead sync after change events. https://v2.vuejs.org/v2/guide/forms.html#lazy

Utility method in Vue.js

I am trying to create a utility method in Vue.js to validate a decimal number from any input field but I'm not sure how to set the value in Vue.js internally.
This is what I did in jQuery before:
$('body').on('blur', '.decimal', function() {
var val = $(this).val();
if ($.isNumeric(val)) {
val = parseFloat(val).toFixed(2);
$(this).val(val);
} else {
$(this).val('');
}
});
This is what I have in Vue but the value is not stored internally and is overwritten.
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
methods: {
validateDecimal: function (e) {
var val = e.target.value;
if (isNumeric(val)) {
e.target.value = parseFloat(val).toFixed(2);
} else {
e.target.value = '';
}
}
}
HTML
<input class="ui-input" :value="some.value" placeholder="0.00" #blur="validateDecimal">
<input class="ui-input" :value="some.othervalue" placeholder="0.00" #blur="validateDecimal">
<input class="ui-input" :value="another.dynamic.input" placeholder="0.00" #blur="validateDecimal">

Apparently you can pass the data object reference to the handler method like so:
(Note you can't just pass the data property, because I don't believe it will be a reference.)
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
inputs:{
'v1':{
value:'1.256'
},
'v2':{
value:'1.521'
}
},
someInput:{value:'1.7125'}
},
methods:{
validateDecimal: function (o,p,e) {
console.log('validateDecimal',o);
var val = e.target.value;
console.log(val);
if (Number(parseFloat(val)) == val) {
val = parseFloat(val).toFixed(2);
this.$set(o, p, val);
} else {
this.$set(o, p, '');
e.target.value = '';
}
},
foo: function(){
console.log(this.inputs.v1.value)
console.log(this.inputs.v2.value)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="i,key in this.inputs">
<input class="ui-input" :value="i.value" placeholder="0.00" #blur="validateDecimal(i, 'value', $event)">
</div>
<div>
<input class="ui-input" :value="this.someInput.value" placeholder="0.00" #blur="validateDecimal(someInput,'value', $event)">
</div>
<button #click="foo">Click</button>
</div>
Edit by OP: Adding an extra parameter for the name of the property and using $set to make the dynamic property reactive. This should make the method more general purpose for any dynamic input fields with any property name.

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>