I'm creating a test app and I'm trying to set the default value of the field by calculation of other fields so this is my code:
<input type="text" class="sc table-input" v-model="staff['all_total']" :value="(staff.salary + Number(staff['overtime']) + Number(staff['educational']) + Number(staff['finance']) + Number(staff['macul']))" />
By this, I want to combine four fields (overtime + educational + finance + macul) values and add it to another field called 'all_total' then the 'all_total' also will be used for some other calculations but it's all working the only problem is I don't have access to 'all_total' anymore if I remove the property of ':value' I can't access the 'all_total' v-model if I add ':value' then I can't access. Does anyone know what's wrong with this?
v-model is just a syntax sugar, which means when you write:
<input v-model="staff['all_total']" />
you are getting:
<input :value="staff['all_total']" #input="staff['all_total'] = $event.target.value"/>
So when you use both v-model and :value in your code, :value will be used and you will not get access to staff['all_total'].
If your goal is to prepopulate staff['all_total'], it's better to do it in code, probably mounted. If your goal is to just show some composed value, which is based on those 4 fields, use computed instead.
Related
I am trying to create a questionnaire. I have an array of questions. Each question is an object. During the loop the <component :is> checks the component property inside the question object. If the property equals an Input for example then an input will be shown and so on.
This works for simple questions. However the last question requires a more complex layout. Here 'Please add items' needs to have two inputs and an add button. Once pressed a table will appear with each row displaying the values passed into the fields from above. At the moment I can't do this as I am looping though a sub set of questions.
There could be 1000+ questions eventually and I am not sure whether creating a component for each question is the right approach?
I know my current approach isn't right some how but I am completely stuck how to approach this. Is there a way of looping through data and providing unique layouts for each question? The data structure isn't set in stone so feel free to change it.
https://codesandbox.io/embed/blazing-wood-ifnxym?fontsize=14&hidenavigation=1&theme=dark
Within the v-for, you can wrap the elements in a <template>, and then just use v-if to determine which element is displayed.
For example :
<template v-for="question in question.questions" :key="question.id">
<Input v-if="quetion.type === 'text'" :question="question" />
<Radio v-if="quetion.type === 'choice'" :question="question" />
...
</template>
I have a select input. and checkbox-list in vuejs form. Checkbox list depend on what is chosen in select. The problem is that if i check let's say 1 or 2 checkboxes, after I change select, 1 or 2 checkboxes will always stay checked despite the fact that values and labels of checkboxes have already changed. It looks like it doesn't build new checkboxes with new 'checked' attribute.
Select has onChangefunction() in which I change list of items to be checked in checkbox list. Checked() function in checkbox checks whether this exact element should be checked and returns true or false
<select #change="onChange" ...
<input type="checkbox" :checked="checked()" ...
The thing is that even if checked() function will always just return false, the checkbox will stay checked after I manually checked it on the page however many time I will change select input choice
To really give a good answer, I think a bit more information might be required. That being said, it looks like you're binding is incorrect. Your input line probably should be:
<input type="checkbox" :checked="checked" ...
So your checked function shouldn't have parens on it.
If that's not the issue, please post the rest of your component so we can see the script and data values.
Agreed with #DRich here but you can use #input method to call a method
<select #input="onChange" ...
I use this most of the time
I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value and I don't understand why.
Can someone give me a simple explanation about the difference between these two and when it's better use each one?
From here -
Remember:
<input v-model="something">
is essentially the same as:
<input
v-bind:value="something"
v-on:input="something = $event.target.value"
>
or (shorthand syntax):
<input
:value="something"
#input="something = $event.target.value"
>
So v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup and v-on:input to update the js value. The js value must be present in your data, or in an inject.
Use v-model when you can. Use v-bind/v-on when you must :-) I hope your answer was accepted.
v-model works with all the basic HTML input types (text, textarea, number, radio, checkbox, select). You can use v-model with input type=date if your model stores dates as ISO strings (yyyy-mm-dd). If you want to use date objects in your model (a good idea as soon as you're going to manipulate or format them), do this.
v-model has some extra smarts that it's good to be aware of. If you're using an IME ( lots of mobile keyboards, or Chinese/Japanese/Korean ), v-model will not update until a word is complete (a space is entered or the user leaves the field). v-input will fire much more frequently.
v-model also has modifiers .lazy, .trim, .number, covered in the doc.
In simple words
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa.
but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
check out this simple example: https://jsfiddle.net/gs0kphvc/
v-model
it is two way data binding, it is used to bind html input element when you change input value then bounded data will be change.
v-model is used only for HTML input elements
ex: <input type="text" v-model="name" >
v-bind
it is one way data binding,means you can only bind data to input element but can't change bounded data changing input element.
v-bind is used to bind html attribute
ex:
<input type="text" v-bind:class="abc" v-bind:value="">
<a v-bind:href="home/abc" > click me </a>
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. But v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
v-model is intended to be used with form elements. It allows you to tie the form element (e.g. a text input) with the data object in your Vue instance.
Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/
v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change
Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/
Hope this helps you with basic understanding.
There are cases where you don't want to use v-model. If you have two inputs, and each depend on each other, you might have circular referential issues. Common use cases is if you're building an accounting calculator.
In these cases, it's not a good idea to use either watchers or computed properties.
Instead, take your v-model and split it as above answer indicates
<input
:value="something"
#input="something = $event.target.value"
>
In practice, if you are decoupling your logic this way, you'll probably be calling a method.
This is what it would look like in a real world scenario:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input :value="extendedCost" #input="_onInputExtendedCost" />
<p> {{ extendedCost }}
</div>
<script>
var app = new Vue({
el: "#app",
data: function(){
return {
extendedCost: 0,
}
},
methods: {
_onInputExtendedCost: function($event) {
this.extendedCost = parseInt($event.target.value);
// Go update other inputs here
}
}
});
</script>
Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?
<div repeat.for="i of model.someArray.length">
<label>Some Array - Index ${i + 1}</label>
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>
and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.
== Edit ==
I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>
The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.
model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.
Your code should look like this:
<div repeat.for="item of model.someArray">
<label>Some Array - Index ${$index + 1}</label>
<input value.bind="item" some-custom-attribute.bind="item"/>
</div>
To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"
I am encountering a requirement where I need to use multiple hidden field elements. The values for these elements are stored in an array. What would be the best possible approach to build that in the zend form.
id[] = array('1', '2', '3', ....);
This values for id[] is dynamically generated.
And the html part for my case would look something like this
<input type="hidden" name="ids[]" value="id[0]" />
<input type="hidden" name="ids[]" value="id[1]" />
<input type="hidden" name="ids[]" value="id[2]" />
.
.
.
and so on.
How can a create multiple input hidden field elements, which I later want to use it in my controller by using the populate method.
In case if anyone has an idea how to approach this, would be really helpful.
P.S. Im using Zend Framework 2
It sounds like you're running into a use-case anticipated by Form Collections.
\Zend\Form has baked in support for managing this kind of relational structure.
The gist of it is that you create a Fieldset which can hold a collection of identifiers for your related entity.
While the documentation doesn't demonstrate with hidden elements, there's no reason you can't create a fieldset full of hidden elements. Take a careful look at the "Category" fieldset in the documentation.