I am new to Vue and I have to fix the following issue for work. I have a Bootstrap Vue b-form-checkbox-group similar to the one bellow. The listofOption comes from backend and from legacy databses. Sometime the ColumnName is empty or null. Right now it shows null or a blank space, but I want it to print the text "_blank" if that is the case.
<b-form-checkbox-group id="flavors"
v-model="status"
:options="listofOption"
:text-field="ColumnName"
:value-field="ColumnName"
name="flavors" class="ml-4" aria-label="Individual flavours" stacked>
</b-form-checkbox-group>
I have replaced the :text-field with the following line but can't make it work:
:text-field="[(ColumnName && ColumnName != null && ColumnName != '') ? ColumnName : '_blank']"
You could pass that value binding via function.
getColumnName(ColumnName) {
return (ColumnName && ColumnName != '') ? ColumnName : '_blank'
}
Then:
:text-field="getColumnName(ColumnName)
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?
UPDATE dbo.Einkauf_Web_Upload
SET
${
updatedUpload.Menge !== null
? `Anzahl = ${`${updatedUpload.Menge}`},`
: null
},
${
updatedUpload.ENummer !== null
? `ENummer = ${`'${updatedUpload.ENummer}'`}`
: null
}
WHERE ...
This query is supposed to differentiate between updated values of the object updatedUpload which, initially, has all of its values set to null. If the value is not altered therefor not updated, the query must not affect the particular column. In its current state, the query throws this error:
Incorrect syntax near the keyword 'null'
And I know why; if you do not alter the Menge attribute, the query looks like this:
UPDATE dbo.Einkauf_Web_Upload
SET null, ENummer = "abc"
WHERE ..
Is there a workaround to this? I am using NodeJs as my backend and thought of trying to make the column references dynamic via a mapped array which contains only the altered columns of updatedUpload.
Will appreciate any help!
SET null, ... is invalid SQL syntax, you should skip the null at all. Furthermore, remember not to do the query if there is nothing to update as SET WHERE ... is also invalid syntax.
I would suggest something like:
let updates = [
updatedUpload.Menge !== null ? `Anzahl = ${`${updatedUpload.Menge}`}` : null,
updatedUpload.ENummer !== null ? `ENummer = ${`'${updatedUpload.ENummer}'`}` : null,
// ... add here
]
// Filter out null updates
updates = updates.filter(u => !!u);
// Do query only if updates are avaliable
if (updates.length > 0) {
const sql = `UPDATE dbo.Einkauf_Web_Upload SET ${updates.join(', ')} WHERE ...`;
// ... execute
}
I have a <a> tag in my vue component & by checking some condition v-bind:href may differ. I have used ternary operator for it and in the else part I want to pass id with the url, but with not as part of url (like '/test/' +id). id should not be in the url. so how to do it?
This is how I tried for it & it giving me the compile error due to comma before id in else part,
<a v-bind:href="type === 'single' ? '/user/'+user.id+'/edit' : '/profile',user.id">
Url should be like "/profile"
I have resolved it as follows,
<a v-bind:href="type === 'single' ? '/user/'+user.id+'/edit' : '/profile?user_id='+user.id">
How can I add
isTypeSelected(dietType)
to be default for the first element from v-for list?
b-col(lg="" md="6", sm="6").text-center(v-for="dietType in dietTypeList", :key="dietType.id")
div.pointer(:class="{ faded: !isTypeSelected(dietType) }", #click.prevent="dietTypeId = dietType.id")
dbm-icon.p-2.diet-type-icon(:icon="dietType.icon", variant="secondary", v-if="isTypeSelected(dietType)")
dbm-icon.p-2.diet-type-icon(:icon="dietType.icon", variant="light", v-if="!isTypeSelected(dietType)")
p {{ dietType.name }}
add && dietType.id===1 to the class binding condition :
div.pointer(:class="{ faded: !isTypeSelected(dietType) && dietType.id===1 }"
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")