I try to add conditionally a data attribute value to my vue list on loop and I try the following
<ul data-parent="{{model.parent_id !== null ? model.parent_id : 0}}"></ul>
but in this case the list do not renders anymore, if dump out outside html tag {{model.parent_id !== null ? model.parent_id : 0}} than I see the correct output
Use : before that and I would create a computed property like this.
computed: {
parentId() {
if (this.model.parent_id !== null)
return this.model.parent_id
return 0;
}
}
<ul :data-parent="parentId"></ul>
The right Syntax
<ul :data-parent="{{(model.parent_id !== null) ? model.parent_id : 0}}"></ul>
Related
I am trying to set the disabled property on a text field via checkbox. I'm referencing this item, but none of the solutions are working for me.
My text field and checkbox are as follows:
<input
type="checkbox"
class="form-check-input"
v-model="formData.useSystemSetting"
>
<input
type="text"
class="form-control"
:class="hasError('maxCount') ? 'is-invalid' : ''"
placeholder="Enter the Maximum Count"
v-model="formData.maxCount"
:disabled = "isDisabled"
>
My computed property is:
computed:{
isDisabled: function() {
this.useSystemSetting = this.useSystemSetting == true?false:true
return this.useSystemSetting;
},
I'm also setting useSystemSettings in the data section to true because if I don't it doesn't get populated. When I add a breakpoint to the computed property, it's only getting hit on the page load, but not after.
It's not allowed to mutate other properties inside the computed property, you should only do some process and return a value:
computed:{
isDisabled: function() {
return this.useSystemSetting ? false : true;
}
}
You shouldn't mutate data inside a computed property.
A computed property is used whenever you need to use logic for getting a value which includes reactive data, as you'd find here.
You could try something like:
computed:{
isDisabled: function() {
return !this.formData.useSystemSetting;
}
}
Presuming that the formData object will not be null at this point.
To prevent that, you could also use something like:
return ((this.formData || {}).useSystemSetting || true) ? false : true;
Using vue.js 2 I need to dynamically add classes to a <tr> element.
What works (single method call)
:tbody-tr-class="urgentEnquiryMixin_rowColour"
What doesn't work (two method calls, one a mixin)
Adding an additional method to the v-bind
:tbody-tr-class="urgentEnquiryMixin_rowColour applyUnreadClass"
What i have tried
:tbody-tr-class="[applyUnreadClass, urgentEnquiryMixin_rowColour]"
:tbody-tr-class="{applyUnreadClass(), urgentEnquiryMixin_rowColour}"
Additional code for info
applyUnreadClass(item, type) {
if (!item || type !== 'row') {
return '';
}
if (item.read === false) {
return 'unread-email-row';
}
return '';
}
urgentEnquiryMixin_rowColour(item, type) {
if (!item || type !== 'row') { return ''; }
if (item.isUrgent === true) { return 'tr-urgent'; }
return '';
}
<b-table id="assigned-enquiries-table" class="index-grid" headVariant="light" hover
:items="enquiriesData" :fields="columns" :current-page="page" :per-page="rowsPerPage"
show-empty :tbody-tr-class="applyUnreadClass, urgentEnquiryMixin_rowColour"
#filtered="onFiltered" :busy="isBusy"
>
Errors
'v-bind' directives require an attribute value
Parsing error: Unexpected token ','.
Parsing error: Unexpected token ','.eslint-plugin-vue
You can use class directly for optional classes.
You can even use class as well to have classes that always work:
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
So create props for these classes (which are booleans) and pass them like that to you.
However if you want to add them dynamically. Create ONE string that you paste inside class. This will contain all classes in that string. (eg. 'Class1 Class2 Class3')
https://v2.vuejs.org/v2/guide/class-and-style.html
#if (unit.unitNum != null)
{
<div>#unit.unitNum - #unit.type</div>
}
Is there a way to right conditional within div element?
I have to write conditional for unit.type too so it will be many ifs.
Yes you can write a conditional within a div element.
<div>
#if(unit.unitNum != null)
{
#unit.unitNum - #unit.type
}
else {
#* just do whatever you want here or don't write an else clause *#
}
</div>
Note that you can also use String interpolation
<div>
#if(unit.unitNum != null)
{
#($"{unit.unitNum} - {#unit.type}")
}
</div>
You could even simplify this a bit more. Also since you didn't specify this, the type of unit.unitNum doesn't really matter here, e.g. it could be an int, or a string.
<div>
#($"{(unit.unitNum != null ? unit.unitNum : "no number found")} - {#unit.type}")
</div>
I am trying to use if elseif else condition in my method which I want to trigger depending on what I dropdown I select. I don't know why is it not working or if is it possible? Here is an example to demonstrate
<HelloWorld :msg="msg"/>Select number
<HelloWorld :msg="hi"/>
validate(val) {
if (val === "msg") {
alert("msg");
} else if (val === "hi") {
alert("hi");
}
You are passing a variable on the props, not string, change :msg="msg" to :msg="'msg'" or msg="msg", and :msg="hi" to :msg="'hi'" or msg="hi"
on HelloWorld component, you are supposed to to check if (this.msg === "msg") instead of if (val === "msg")
Demo: https://codesandbox.io/s/wispy-water-dxmuz
I use the control MicrosoftNSJS.Advertising.AdControl in the ItemTemplate of a ListView.
I would like to bind some datas to the following data-win-options properties : ApplicationId and AdUnitId
The source datas are correctly set and are visible in my item template, I can display them with an h2 + a classic data-win-bind on innerText property
Ads are displayed correctly if I put directly static IDs in html code but these IDs need to be loaded from a config file...
Is it possible ? Thanks
If it's not possible, can I modify directly the item template in the JS code before to be injected in the listview ?
Come to find out this is possible (I was trying to do something similar)
The syntax for the control properties must be prefixed with winControl.
Example (I'm setting the application id here but binding the html element's className and the ad control's adUnitId)
<div id="adItemTemplate" data-win-control="WinJS.Binding.Template">
<div data-win-bind="className:css; winControl.adUnitId: adUnitId"
data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{ applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab'}">
</div>
</div>
I finally found a way to perform this without real binding, by using the itemTemplateSelector function like this :
function itemTemplateSelector(itemPromise)
{
return itemPromise.then(function (item)
{
if (item.type == "ad")
{
var template = _$(".adTemplate").winControl.render(item, null);
// Access to the AdControl through the DOM
var adControl = template._value.childNodes[1].childNodes[1].winControl;
// Set options that are specified in the item
WinJS.UI.setOptions(adControl, { applicationId: item.AdAppId, adUnitId: item.AdUnitId });
return template;
}
else
{
return _$(".itemTemplate").winControl.render(item, null);
}
}
}
I had this problem in ratings:
<div data-win-control="WinJS.UI.Rating" data-win-options="{averageRating: 3.4, onchange: basics.changeRating}"></div>
I bind it via winControl:
<div data-win-control="WinJS.UI.Rating" data-win-bind="winControl.averageRating: myrating" data-win-options="{onchange: basics.changeRating}"></div>
It worked fine.
<div data-win-bind="this['data-list_item_index']:id WinJS.Binding.setAttribute" >