I have a textarea which is rendered dynamically when the page loads.
It looks like this :
<textarea type="textarea" class="form-control" name="symptoms_mlform" id="symptoms_mlform">affective</textarea>
I want to have a v-model in this textarea. How can I achieve this.
Purpose for this is I have a dropdown in child component, which emits event when something selected. So that event I am using in parent to populate this textarea.
<MLSubMenu
v-on:SelectedSymptoms="SelectedSymptoms"
>
</MLSubMenu>
SelectedSymptoms(event){
$("#symptoms_mlform").text(event);
},
The event is handled by SelectedSymptoms in parent, which sets the event value to textarea.
The drawback I faced while using this:
If you keep selecting the values from dropdown, it will keep coming in textarea.
But if you remove anything from textarea and then select from dropdown, it will not show in textarea but if I inspect this textarea, selected values will show there but not reflected in browser.
You can achieve this requirement by following the below mentioned steps.
In child component :
SelectedSymptoms(event){
this.$emit('send-selected-value', 'carrier');
}
In parent component :
<div v-on:send-selected-value="getSelectedValue(e)">
<textarea type="textarea" v-model="modelValue" class="form-control" name="symptoms_mlform" id="symptoms_mlform">affective</textarea>
</div>
methods: {
getSelectedValue: function (e) {
this.modelValue = e;
}
}
Related
I have a form on my page which I wish to trigger the submit from another button outside of the form how can I do this?
You have to add a ref to the HTML form
<form ref="form">
<input name="field" v-model="value">
</form>
Then inside your methods you can use the reference to submit the form
methods: {
send: function(){
this.$refs.form.submit()
}
}
and you can call the send method wherever your want.
You can learn more about ref attribute here
https://v3.vuejs.org/guide/component-template-refs.html
I'm trying to customize an out-of-the-box form in Vue.js where inputs are shown/hidden depending on the selection of 2 radio buttons:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
I have defined isOperator in the data (am I defining data correctly? I'm trying to modify the out-of-the-box code, not sure what this means):
export default {
name: 'User-Details',
components: {...},
props: {...},
data () {
let data = {
...
isOperator: true,
...
};
and I'm trying to make this show/hide a button and input fields. I'm starting with the button as it seems simpler:
<b-button v-show="isOperator === true" #click="save" :block="true" size="lg" variant="primary" active-class="ssrv-form-button" class="ssrv-form-button">
{{$t("common.form.signUp")}}
</b-button>
My current problem, is the button isn't showing/hiding based on the two radio buttons. If I make isOperator: true in the data, the page loads with the 2nd radio button selected and the button showing. When I click the second radio button, it disappears. But then when I click the original radio button again, the button doesn't show back up. I get the same result when I try to show/hide an input field, I can get it to show initially by setting isOperator to true, but then when I select the other radio button to make it disappear I can't make it appear again. If isOperator is set to false, it just never shows.
I put a isOperator is {{ isOperator }} p element and I can see the value is change true/false as expected, but the buttons/inputs aren't showing back up.
From my very limited understanding of Vue.js, I set the v-model to a variable I want an element to modify, and the value what that variable will be set to when the radio button is selected. Then on a separate element I want to show/hide, I can use v-if/v-show with "myvalue === true/false" to show/hide. Is this an oversimplification and I'm missing steps?
That's because of a mismatch in the type of isOperator property. When you first mount the component the value of isOperator is a boolean (true), and then later on when you click on the radio buttons it becomes a string. You need to adjust the value property in your template as below:
<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" :value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" :value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>
Please briefly go over this component code.
<template>
<div>
<b-form-checkbox
id="checkbox-0"
v-model="checkboxIsChecked"
name="checkbox-1"
> Nested checkbox
</b-form-checkbox>
<nested-checkbox-error class="ml-4" v-if="checkboxIsChecked"></nested-checkbox-error>
</div>
</template>
<script>
export default {
name: "nested-checkbox-error",
data(){
return {
checkboxIsChecked: false
}
}
}
</script>
<style scoped>
</style>
Here, I am trying to make a nested checkbox. A child checkbox is supposed to appear when you check the box. It works fine for the root checkbox. But for the child checkbox, when I click it, parent's 'checkboxIsChecked' is the one being toggled. Is something wrong with how I understand v-model?
It appears you are using a recursive component.
Each checkbox in a group (that has the same name) should have a different value, and the v-model should also be an array (each checkbox, when checked, stores it's value in the array).
The ID assigned to each checkbox also needs to be unique per checkbox.
I'm hoping I'm just missing something simple because I've been looking at this for too long, but I'm stumped.
I have a form with inputs bound to vuejs. I have a group of 2 radio buttons for selecting the "gender", and the binding is working perfectly. If I click on either of the radio buttons, I can see the data change in the vue component inspector.
But I'm trying to change the radio buttons to a Bootstrap 4 button group, and can't seem to get the v-model binding to work. No matter what I try, the gender_id in my vue data is not getting updated when I click either of the buttons in the button group.
The form input values are being fed in through vue component properties, but for simplicity, my data for the radio buttons/button group would look like this:
export default {
data() {
return {
genders: {
1: "Men's",
2: "Women's"
},
gender_id: {
type: Number,
default: null
}
}
}
}
Here is the code I have for the radio button version (which is working properly):
<div class="form-group">
<label>Gender:</label>
<div>
<div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="form-check-input"
name="gender_id"
:id="'gender_' + key"
:value="key"
v-model.number="gender_id">
<label class="form-check-label" :for="'gender_' + key">
{{ gender }}
</label>
</div>
</div>
</div>
Here is the button group version that is not properly binding to the gender_id data in vue.
<div class="form-group">
<label>Gender:</label>
<div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
<input type="radio"
class="btn-group-toggle"
name="gender_id"
:id="'gender_' + key"
:value="key"
autocomplete="off"
v-model.number="gender_id">
{{ gender }}
</label>
</div>
</div>
</div>
I've been using the following Boostrap 4 documentation to try to get this working.
https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons
In the documentation for button groups they don't even include the value property of the radio inputs, whereas they do include it in the documentation for form radio buttons.
https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios
Is this for simplicity or do button groups of radio buttons not even return the value of the checked button?
I see other threads stating that buttons groups are not meant to function as radio buttons, but if that's true for BS4, then why would Bootstrap have button groups with radio buttons as they do in their documentation referenced above? If you can't retrieve the checked state, then why not just use a <button> instead of <label><input type=radio></label>?
Any ideas as to what I'm doing wrong and/or not understanding correctly?
Thanks so much!
Thanks so much to #ebbishop for his helpful insights.
The issue was related to vue and bootstrap both trying to apply javascript to the buttons in the button group.
To get around this issue, it was as simple as removing data-toggle="buttons" from the button group. By removing the data-toggle attribute, the bootstrap js is not applied and vue can manage the button group.
Nothing is actually wrong your use of v-model here.
However: you must add the class "active" to the <label> that wraps each radio-button <input>.
See this fiddle for a working example.
Is that what you're after?
I've a custom dojo widget (reminder )which I want to reload on an event(on click of add button on widget a dialog will open where I'll fill reminder data and will click submit . on click of submit button widget should reload with data which I filled in dialog).
<body class="claro teller">
<form name="tellerForm">
<input type="hidden" name="expldQryStr" id="expldQryStr">
<input type="hidden" name="actionCode" id="actionCode">
</form>
<div class="row">
<div data-dojo-type="MyCashBalanceWidget.MyCashBalance" data-dojo-props="title:'Our Cash Balance Widget',data:CashBalData,data1:invtData"></div>
<div data-dojo-type="MyFrequentTasksWidget.MyFrequentTasks" data-dojo-props="pageName:'TellerLandingPage',title:'Our Some Widget',data:freqTskData"></div>
<div data-dojo-type="PendingTransactionWidget.PendingTransaction" data-dojo-props="title:'Pending Transaction Widget',data:pndTrnData,data1:pndVrfData"></div>
<div id="remWdgt" data-dojo-type="MyRemindersWidget.MyReminders" data-dojo-props="pageName:'TellerLandingPage',title:'My Reminders Widget',data:rmndrData"></div>
<div data-dojo-type="MyAppsWidget.MyApps" data-dojo-props="pageName:'TellerLandingPage',title:'My Apps Widget'"></div>
<div data-dojo-type="MyActivityWidget.MyActivity" data-dojo-props="pageName:'TellerLandingPage',title:'My Activity Widget',data:analData"></div>
</div>
<div data-dojo-type="TellerLandingPageGridWidget.TellerLandingPageGrid" data-dojo-props="title:'Teller Landing grid',data:lastTrans">
</div>
<script>
//including all the custom widgets
require(
[
"dojo/parser",
"CommonWidgets/MyFrequentTasksWidget",
"Widgets/MyCashBalanceWidget",
"Widgets/PendingTransactionWidget",
"CommonWidgets/MyRemindersWidget",
"CommonWidgets/MyAppsWidget",
"CommonWidgets/MyActivityWidget",
"Widgets/TellerLandingPageGridWidget"
],
function( parser) {
parser.parse();
});
</script>
</body>
</html>
please suggest how can I reload dojo widget .
I am not sure about your complete scenario. But in such situation, you have two ways:-
1) Add event listener to your custom widget, that will listen and modify itself
2) Recreate the widget, passing it's constructor with the new values.
Your question is quite unclear, but from the sound of it, you just want to set the innerHTML of a specific DOM node if a form within a dialog is submit. There's no reason to reload the widget for that, you could just add an event handler to the submit event of the dialog form, and use that to set the innerHTML of a specific element inside your widget.
First of all you need to add an onLoad event listener to your dialog so you know exactly when to add the event handlers to the form:
postCreate: function() {
this.myDialog = new Dialog();
this.myDialog.on("load", lang.hitch(this, this.loadDialog));
this.myDialog.set("content", "<div><form><input type='text' /><button type='submit'>Submit</button></div>");
},
This will call a function loadDialog on your widget, which could look like this:
loadDialog: function() {
var vm = this;
query("form", this.myDialog.domNode).on("submit", function(evt) {
evt.preventDefault();
vm.myLabel.innerHTML = query("input", this).val();
vm.myDialog.hide();
});
},
This function utilizes dojo/query and dojo/NodeList-manipulate to obtain the form field value when the form inside the dialog is submit. That value is then used to alter myLabel an element on the widget that I gave the attribute data-dojo-attach-point="myLabel" so that it's easily accessible from within the widget code:
templateString: "<div><label data-dojo-attach-point='myLabel'></label><button data-dojo-attach-event='onClick: openDialog'>Add</button></div>",