I'm creating a sidebar with a lot of features soo I need add two conditionals in my :class, but i don't know how to do this. That's what I do:
:class=" showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini'"
You can do in object style:
Example:
{
'open': showSidebar,
'closed': !showSidebar,
'openmini': showSidebarMini,
'closedmini': !showSidebarMini
}
In your case:
:class="{ 'open': showSidebar, 'closed': !showSidebar, 'openmini': showSidebarMini, 'closedmini': !showSidebarMini }"
you must use object syntax when you have a condition in class
v-bind:class="{'open' : showSidebar , 'openmini' : showSidebarMini}"
and use array in your class when you need toggle class
v-bind:class="[showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini']"
you can use array of classes:
:class="[(showSidebar ? 'open' : 'closed'), (showSidebarMini ? 'openmini' : 'closedmini')]"
Related
I have a made a custom "Select" component as well as an "Input" component. For my use case, it a certain object with "Preset" value is selected then I want the "Input" component to dynamically set the value to this Preset value. The parent component (below) has the child component "MegaSelect" (the custom select component) and "MegaCell" (custom input component)
<MegaSelect
:row="rowNum"
:col="0"
:options="frontTypes"
:displayValue="true"
:data.sync="data.frontType"
placeholder="Item type"
#change="typeChange"
></MegaSelect>
Here the "Select" component called "MegaSelect" is triggering typeChange (below)
typeChange() {
var presets = productData.getFrontType(this.data.frontType).presets
this.wPresets = presets ? presets.w : null
this.hPresets = presets ? presets.h : null
this.qtyPresets = presets ? presets.qty : null
}
typeChange will check if my selected object has a hardcoded "Preset" value. if it does, it will update the data of wPresets, hPresets and qtyPresets.
<MegaCell
:value="qtyPresets ? qtyPresets[0] : null"
:data.sync="data.qty"
dataType="Number"
:row="rowNum"
:col="4"
></MegaCell>
it will then dynamically update the :value of another custom "input" component called "MegaCell" which has a :prop.sync updating the "data" prop.
the MegaCell component has the following template
<template>
<div
class="mega-cell"
:class="{
selected: selected,
focussed: focussed,
outOfBounds: outOfBounds,
warn: warn
}"
#mousedown="mousedown"
>
<input ref="field" v-model="convertedDbValue" #focus="setFocus" #dblclick="setFocus" :placeholder="placeholder" />
</div>
</template>
I believe my mistake has something to do with the v-model and my computed: convertedDbValue's setter (below)
convertedDbValue: {
get: function() {
if (!this.data) return null
var fixedData = this.$utils.toFixedNumber(this.data / 25.4, 3)
var adjustedData = fixedData % 1 == 0 ? parseInt(fixedData) : fixedData
return this.dataType == 'Number' && this.unit == 'inch' ? adjustedData : this.data
},
set: function(value) {
if (this.dataType !== 'String') {
var val = this.unit == 'inch' ? this.$utils.toFixedNumber(value * 25.4, 3) : parseInt(value)
this.$emit('update:data', val)
} else {
this.$emit('update:data', value)
}
}
}
it's updating the data prop with a few adjustments to the inputted (number) value. how do i get the :value to dynamically change from the parent component to the child component and update the input value accordingly?
My vue component is like this :
<template>
<a :class="'btn ' + [respond == 'responseFound' ? ' btn-yellow' : ' btn-default', type == 1 ? ' btn-block' : ' btn-xs center-block']">
...
</a>
</template>
I try like that, but it does not work?
You can use :class="[array, of, classes]" syntax:
<a :class="['btn', (respond === 'responseFound' ? 'btn-yellow' : 'btn-default'), (type === 1 ? 'btn-block' : 'btn-xs center-block')]">
As a bonus you don't have to worry about adding the leading spaces, Vue will handle it.
Just to keep things clean in view/template/markup, move your conditions to computed properties:
<template>
<a :class="['btn', getRespondClass, getTypeClass]">
</template>
<script>
export default {
data () {
return {
respond: '',
type: ''
}
},
computed: {
getRespondClass () {
return this.respond === 'responseFound' ? 'btn-yellow' : 'btn-default'
},
getTypeClass () {
return this.type === 1 ? 'btn-block' : 'btn-xs center-block'
}
}
}
</script>
Pretty sure the current showed answer says how you can add multiple classes on 1 condition. But if you want to have multiple conditions for your class added you can simply just do it like this:
:class="{'classname': condition_one && condition_two}"
Or you can do this:
:class="[ condition1 | condition2 ? 'className' : '']"
This checks for either of the conditions to be true. If you want to check for both replace | with &&. But if you have nothing in the else class, I think #Marnix's answer is cleaner.
I have a list of category names that are written in Jade.
ul
li Discussion
li Movie
li Music
li Performance
li Dance
li Theatre
And I have some json, that shows what kind of categories are added to a specific event:
…
values: [
{
ordinal: 50469,
db_value: 626,
id: 50469,
value: "Discussion"
},
{
ordinal: 50470,
db_value: 623,
id: 50470,
value: "Dance"
}
],
…
I have a route, that gets the category values:
res.render("event", {
categories: data.result.properties.category.values
})
How can I achieve an outcome like this, that an if/else checks if the value equals the same thing that's in the li tag and by this adds a class .unactive, if it doesn't exhist in the json array:
<ul>
<li>Discussion</li>
<li class="unactive">Movie</li>
<li class="unactive">Music</li>
<li class="unactive">Performance</li>
<li>Dance</li>
<li class="unactive">Theatre</li>
</ul>
First, as Andrew did, i would simplify the data format. You could either do this in Node before sending it to the template, or using some JS in the template itself. I'll only edit the template here:
- categoryNames = categories.map(function(c){return c.value});
This will create an array of just the names. (And, it doesn't even need underscore.js. ;))
Now, you can simply check if a given name is in the array using indexOf():
ul
li(class=(categoryNames.indexOf("Discussion") > -1 ? "" : "inactive")) Discussion
li(class=(categoryNames.indexOf("Movie") > -1 ? "" : "inactive")) Movie
li(class=(categoryNames.indexOf("Music") > -1 ? "" : "inactive")) Music
li(class=(categoryNames.indexOf("Performance") > -1 ? "" : "inactive")) Performance
li(class=(categoryNames.indexOf("Dance") > -1 ? "" : "inactive")) Dance
li(class=(categoryNames.indexOf("Theatre") > -1 ? "" : "inactive")) Theatre
I would first massage the data a bit to a format that's easier to render, like this:
var _ = require('underscore');
var categoryNames = _.map(data.result.properties.category.values, function(value) {
return value.value;
});
// categoryNames is an array like this: ['Discussion', 'Dance']
res.render("event", {
categoryNames: categoryNames
})
Now you can get the behavior you're looking for like this:
ul
each category in categoryNames
li category
But if you really want to keep the "disabled" cateogry tags around, you can do it with an inline conditional like this:
ul
each category in ['Discussion', 'Movie', 'Music', 'Performance', 'Theatre']
li(class=(categoryNames.indexOf(category) === -1) ? "" : "inactive") #{category}
I'm trying to add a new column to a .Net MVC WebGrid that includes a checkbox that is there if a specific condition is met and not there if the condition is false.
The below code works to correctly display X or Y (placeholder):
grid.Column("ID", header: "",
style: "labelcolumn",
format: (item) => item.ID != null ? "X" : "Y"),
I can't seem to get the syntax right to include the checkbox instead of X.
grid.Column("ID", header: "",
style: "labelcolumn",
format: (item) => item.ID != null ? #<text><input class="check-box" id="cbSelectedBranch" name="cbSelectedBranch" type="checkbox" value="#item.ID" /></text> : "Y"),
On this second snippet, the "(item)" variable causes this error:
CS0136: A local variable named 'item' cannot be declared in this scope
because it would give a different meaning to 'item', which is already
used in a 'parent or current' scope to denote something else
Adding the # when using the if null condition seems to cause item to throw this error. The below code, without the conditional, works correctly:
grid.Column(header: "",
style: "labelcolumn",
format: #<text><input class="check-box" id="cbSelectedBranch" name="cbSelectedBranch" type="checkbox" value="#item.ID" /></text>),
Any idea how I can make this work with a conditional and checkbox input?
try like this:
format: (item) => item.ID != null ? Html.Raw("<input class='check-box' id='cbSelectedBranch' name='cbSelectedBranch' type='checkbox' value='#item.ID' />") : "Y")
Is it possible to use standard HTML5 input fields in an Ember.js view, or are you forced to use the limited selection of built in fields like Ember.TextField, Ember.CheckBox, Ember.TextArea, and Ember.select? I can't seem to figure out how to bind the input values to the views without using the built in views like:
Input: {{view Ember.TextField valueBinding="objectValue" }}
Specifically, I'm in need of a numeric field. Any suggestions?
EDIT: This is now out of date you can achieve everything above with the following:
{{input value=objectValue type="number" min="2"}}
Outdated answer
You can just specify the type for a TextField
Input: {{view Ember.TextField valueBinding="objectValue" type="number"}}
If you want to access the extra attributes of a number field, you can just subclass Ember.TextField.
App.NumberField = Ember.TextField.extend({
type: 'number',
attributeBindings: ['min', 'max', 'step']
})
Input: {{view App.NumberField valueBinding="objectValue" min="1"}}
#Bradley Priest's answer above is correct, adding type=number does work. I found out however that you need to add some attributes to the Ember.TextField object if you need decimal numbers input or want to specify min/max input values. I just extended Ember.TextField to add some attributes to the field:
//Add a number field
App.NumberField = Ember.TextField.extend({
attributeBindings: ['name', 'min', 'max', 'step']
});
In the template:
{{view App.NumberField type="number" valueBinding="view.myValue" min="0.0" max="1.0" step="0.01" }}
et voile!
Here is my well typed take on it :
App.NumberField = Ember.TextField.extend({
type: 'number',
attributeBindings: ['min', 'max', 'step'],
numericValue: function (key, v) {
if (arguments.length === 1)
return parseFloat(this.get('value'));
else
this.set('value', v !== undefined ? v+'' : '');
}.property('value')
});
I use it that way:
{{view App.NumberField type="number" numericValueBinding="prop" min="0.0" max="1.0" step="0.01" }}
The other systems where propagating strings into number typed fields.
You may also wish to prevent people from typing any old letters in there:
App.NumberField = App.TextField.extend({
type: 'number',
attributeBindings: ['min', 'max', 'step'],
numbericValue : function (key,v) {
if (arguments.length === 1)
return parseFloat(this.get('value'));
else
this.set('value', v !== undefined ? v+'' : '');
}.property('value'),
didInsertElement: function() {
this.$().keypress(function(key) {
if((key.charCode!=46)&&(key.charCode!=45)&&(key.charCode < 48 || key.charCode > 57)) return false;
})
}
})
Credit where its due: I extended nraynaud's answer
This is how I would do this now (currently Ember 1.6-beta5) using components (using the ideas from #nraynaud & #nont):
App.NumberFieldComponent = Ember.TextField.extend
tagName: "input"
type: "number"
numericValue: ((key, value) ->
if arguments.length is 1
parseFloat #get "value"
else
#set "value", (if value isnt undefined then "#{value}" else "")
).property "value"
didInsertElement: ->
#$().keypress (key) ->
false if (key.charCode isnt 46) and (key.charCode isnt 45) and (key.charCode < 48 or key.charCode > 57)
Then, to include it in a template:
number-field numericValue=someProperty