I have created the text input field as component. Now i am using the component in a form multiple times. I want to apply a directive only to selected fields. I want to pass the directive name as the #input to component and pass it to component html template as attribute dynamically.
Psuedo code
<form>
<text-input-comp [directiveName]="mydirective" ></text-input-comp>
<text-input-comp></text-input-comp>
<text-input-comp></text-input-comp>
</form>
Any help will be appreciated.
Thanks
Related
i have use html2-pdf in VueJS project in terms of generate pdf file from HTML.
My problem is, is there way to use VueJS variable like {{ variableName }} inside tag <section slot="pdf-content"> ?
Because i have tried but it not print out the value of the variableName. Is there any way to use variable inside the tag of html2-pdf?
Thank you so much.
I am using a v-for over a custom component and passing the item as a prop. But the issue is that each component instance in the loop takes the same item prop. For e.g in the 1st loop a component field has text "abc", then the second looped component also will have the same "abc" text. If I change the text in the 2nd one, it changes in the 1st component too. Is there a way to make the prop unique for each loop ?
For e.g this is the code which calls the inner component:
<template v-for="(businesscase, index) in businessCase.fields">
<custom-case-freetext-field #field-changed="updateFields"
:key="index"
#field-removed="removeFields"
:fields="businessCase.fields"
:index="index">
</custom-case-freetext-field>
</template>
and inside this component I have a basic form
<sw-field :label="$tc('rma.modules.case.freetext.nameLabel')"
:placeholder="$tc('rma.modules.case.freetext.nameLabel')"
required
v-model="fields[index].name">
</sw-field>
<sw-single-select
labelValue="label"
valueProperty="label"
:options="fieldTypes"
:label="$tc('rma.modules.case.freetext.fieldType')"
:placeholder="$tc('rma.modules.case.freetext.fieldType')"
v-model="fields[index].type"
#input="changeType"
required>
</sw-single-select>
If I do :value instead of v-model, the entered value disappears as soon as the element loses focus.
If I use v-model, the data stays there, but then both (or as many are there in the loop) component instances, have data binding between them, so it defeats the purpose of having a loop for multiple components. As seen in the screenshot, I am typing in the 2nd component, but it changes the text for the first one too.
In the above example I am sending the whole array as prop, but I have also tried with individual field element instead of fields
Your are not using the businesscase variable inside your components. And since every component always works on the upper scope property, they will all change the same. Use the innerscope property. If you have problems with reactivity, because you try to mutate props directly work with events emitting the key and the changed value to the upperscope component.
Is it possible to replace dynamically inserted angular component tags?
I have text like the following which I am getting from an api :
Testing <app-test></app-test> for <app-test></app-test> dynamically inserting another <app-test></app-test>
I have a test component and all I am trying to achieve is for the output from the text component to replace the <app-test></app-test> tags.
In my ts file, I am using DomSanitizer so my tags are not striped out, shown below:
this.text = this.sanitizer.bypassSecurityTrustHtml("Testing <app-test></app-test> for <app-test></app-test> dynamically inserting another <app-test></app-test>");
And in my html I am using one-way binding to display the text, like below:
<div [innerHTML]='text'></div>
But the output is just the text without the tags.
You can create a dynamic components by a component ref
In this link you can read about it: https://medium.com/#lukaonik/how-to-create-dynamic-components-in-angular-a2f449acb987
Other solution but not the best is call different components by an ng-swich
I have a 'Builder' component and I am passing a variable named 'formula' to that component, but the changes made in this variable in 'Builder' component do not get updated in current component.
<builder :formula="formula"
:columns="columns"
:result_type="result_type">
</builder>
When I submit form the value for the 'formula' variable is same.
try this
<builder :formula.sync="formula"
:columns="columns"
:result_type="result_type">
</builder>
As in VueJS 2 .sync - 2 way binding has been deprecated, you have to handle it differently. https://v2.vuejs.org/v2/guide/migration.html#once-and-sync-Modifiers-on-v-bind-removed
You have to emit events like this.$emit('formulaChange', formula) etc. and listen to them in parent component with #formulaChange=yourHandler(formula)
How do you display data in a 'textarea' using struts application,
This is my code:
<html:textarea property="comments" </html:textarea>
<bean:write name="FormBean" property="comments"/>
where FormBean is my beanclass and comment is a property in beanclass.
But I cannot get it too work.
Thanks in advance for your help.
If you use Struts action forms and you have the html:textarea tag inside your html:form tag (this tag is only valid when nested inside a form tag body) then the following code is all you need:
<html:textarea property="comments" />
Don't know what you are trying to do with bean:write but if you want to display that inside your html:textarea I'm not sure you can. The property attribute is mandatory for the html:textarea tag and will use that as the content.