I have a list of dynamic components that I render with a for loop.
<component
v-for="component in components"
:key="component.componentId"
:is="component.type"
:componentId="component.componentId">
</component>
One of the different component types is an element that contains an input field. I want to attach v-model to that input.
<input type="text" :name="name">
works but when I do
<input type="text" :name="name" v-model="value">
I get no errors but the component is not rendered. However
<input type="text" :name="name" :value="value" #input="setValue">
works, if used with an appropriate method setValue to update the value attribute.
How should I use v-model in the component?
Apparently dynamic type bindings don't work with v-model. Found a commit in the repository that confirms this. For some reason it doesn't give me the warning, even though process.env.NODE_ENV == undefined.
In the original question I stripped a lot of code to make it more readable but seems like I missed the important part.
Related
This input work correct, when i just add it to the index.html. But it doesnt work when generated by react. The nums in input form just dont changing. Why is this happening?
<input type="date" name="date" value="2003-12-16" max="2021-07-03"/>
To achieve your goal you have go with React way (Controlled Components):
<input type="date" value={this.state.value} onChange={this.handleChange} max="2021-07-03" />
Working demo: Codesandbox
To know about Uncontrolled Components please visit: Uncontrolled Components
I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>
You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"
If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.
I am trying to make an accessible form in React and I need to toggle the attribute aria-describedby based on the state of the field (i.e., if it has an error associated with it).
I know how to toggle the value of the attribute, but with regards to WCAG, a present but empty attribute of this type will fail. The entire attribute needs to be fully present or fully absent. Anything I try in-line throws errors and breaks the render.
To give an example, this is what I've been trying:
<label>
<input type="text" name="someName" ref="someRef" {!this.state.isValid ? aria-describedby="helperText" : ''} required />
<p id="helperText">Helper text for this form field.</p>
</label>
Again though, an empty attribute value for aria-describedby is invalid.
Is there any way to acheive this?
Just spread it like this:
<input type="text"
name="someName"
ref="someRef"
{... !this.state.isValid && {'aria-describedby': 'helperText'} }
required />
This is basically spread operator usage.
I have implemented the Angular 2 ng2-auto-complete component by following this example. You can access it from here also.
The issue I'm facing is, my source is in the form of an object with id as one of the fields. And by following the implementation example of the component, the id is displayed in parenthesis in the dropdown. Is there a way to not display the id in the dropdown?
Here is my HTML code for the auto-complete component:
<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel
name="event" #event="ngModel" [source]="items" display-property-name="name" (valueChanged)="onSelect($event)"/>
This is what I get:
You need to set value-property-name attribute to null:
<input ng2-auto-complete id="inputEvent" class="form-control"
[(ngModel)]="model" ngModel name="event" #event="ngModel"
[source]="items" value-property-name=null
display-property-name="name" (valueChanged)="onSelect($event)"/>
value-property-name is optional attribute, but it has default value - id. Setting it to null won't display anything, which is what you are looking to accomplish.
you can try ang2-autocomplete
the live sample is available at : plnkr.co/edit/5zRD0fcOZHXEMOk4kupY?p=preview
i´m using textinput data-binding off the latest knockout version.
on an input like:
<input type="text" placeholder="name" data-bind="textinput:vm.found().term">
and it works just like a charme, problem:
when i modify the value with some other script like:
vm.found().term("somecontent")
the input does not change?
i need the value of the textinput to change when i change the observable
the doc says nothing about textInput
You should never have raw, deeply nested bindings like you have there. Assuming the found value has changed, it the text box will still be bound to the previous found object. You probably should be using a with binding somewhere.
<div data-bind="with: vm.found">
<input type="text" placeholder="name" data-bind="textinput: term">
</div>