Running sails 1.0 app with Vuejs front end with bootstrap and trying to show a selected "option" in a dropdown but it doesn't show as selected when the page renders. I have tried both <option selected>ounces</option> and <option selected="selected">ounces</option>
HTML:
<!-- ... -->
<div class="col">
<div class="form-group">
<select v-bind:id="'ingredient' + index + 'Units'" class="form-control" v-model="newRecipeFormData.ingredients[index].units">
<option selected>ounces</option> <!-- not showing as selected -->
<option>grams</option>
<option>pounds</option>
<option>kilograms</option>
</select>
</div>
</div>
Screenshot 1:
Where should I look for the issue?
The solution was to set the "selected" value in the Vue model, since it is binded by v-model
In my js:
data: {
recipes: {},
newRecipeFormData: {
recipeName: '',
recipeNotes: '',
ingredients: [
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' },
{ name: '', weight: '', units: 'ounces' }
]
},
//…
syncing: false,
cloudError: '',
//…
recipesModalVisible: false,
},
Now it's showing correctly:
Related
I'm using i18n(v9) to translate a lot of text in a big react project. It's working as intended in cases like:
<Intro
title={details.title}
subtitle={t('resume-upload subtitle')}
description={t('resume-upload description 2')}
/>
However, In a form component that uses these 2 imports:
import { Form } from 'mobx-react-form';
import validatorjs from 'validatorjs';
When I try to translate labels within the code like this:
setup() {
const { t } = this.props;
return {
fields: [
{
name: 'step',
value: 0
},
{
name: 'firstName',
label: t('Firstname'),
rules: 'required|string|between:2,25'
},
{
name: 'lastName',
label: t('Achternaam'),
rules: 'required|string|between:2,25'
},
{
name: 'emailaddress',
label: t('Email'),
rules: 'required|email|string'
},
{
name: 'phonenumber',
label: t('Telephone number'),
rules: 'required|string|telephone'
},
{
name: 'cv',
label: t('resume')
},
{
name: 'terms',
label: 'Terms',
value: false
},
{
name: 'newFile',
label: '',
value: true
},
{
name: 'noFile',
label: '',
value: false
}
]
};
}
}
export default withNamespaces()(UploadForm);
The t function gives an error in a parent file:
TypeError: form.values is not a function
Is there a way to translate json files like the way I'm attempting?
I am trying to load dynamic data to Fusion Chart in my application. I have displayed successfully with static data. But, While try to display the dynamic data, I found, I have to create json objects to show the fields in UI.
My static data which is worked successfully is as follows.
const dataSource = {
chart: {
subcaptionFontSize: '14',
numDivLines: ‘1’,
yAxisMinValue: '0',
yAxisMaxValue: '100',
showYAxisValues: '0',
paletteColors: ‘red’,
useDataPlotColorForLabels: '1',
showPercentInTooltip: '0',
divLineAlpha: '0',
},
data: [
{
label: ‘Apple,
value: '100'
},
{
label: ‘Samsung’,
value: '39'
},
{
label: ‘LG’,
value: '38'
},
{
label: ‘RedMi’,
value: '32'
}
],
annotations: {
showBelow: '0',
autoScale: '1',
groups: [{
id: 'user-images',
items: [{
id: 'dyn-label-bg',
color: ‘green’,
align: 'left',
type: 'text',
text: ‘Apple,
x: '$canvasStartX+30’,
y: '$dataset.0.set.0.ENDY-30'
}, {
id: 'dyn-label-bg',
color: ‘green’,
align: 'left',
type: 'text',
text: ‘Samsung’,
x: '$canvasStartX+30',
y: '$dataset.0.set.1.ENDY-30'
}, {
id: 'dyn-label-bg',
color: 'green',
align: 'left',
type: 'text',
text: 'LG',
x: '$canvasStartX+30’,
y: '$dataset.0.set.2.ENDY-30'
},
{
id: 'dyn-label-bg',
color: ‘green’,
align: 'left',
type: 'text',
fontSize: 12,
text: ‘RedMi`,
x: '$canvasStartX+30’,
y: '$dataset.0.set.3.ENDY-30'
}
]
}]
}
};
And I am getting dynamic data from my api.
So, Its like 3 arrays,
1. Titles
2. Values
3. Indexes
And my dynamic data json objects formation is follows
jsonTextValues = {
label: TitlesArray, value: ValuesArray
};
jsonAnnotations = {
id: 'dyn-label-bg',
color: '#000000',
align: 'left',
type: 'text',
text: TitlesArray,
fontSize: 12,
x: '$canvasStartX+30',
y: `$dataset.0.set.${IndexesArray}.ENDY-30`
}
if (data != nil) {
const graphData = {
chart: {
subcaptionFontSize: '14',
numDivLines: ‘1’,
yAxisMinValue: '0',
yAxisMaxValue: '100',
showYAxisValues: '0',
paletteColors: ‘red’,
useDataPlotColorForLabels: '1',
showPercentInTooltip: '0',
divLineAlpha: '0',
},
data: [
jsonTextValues
],
annotations: {
showBelow: '0',
autoScale: '1',
groups: [{
id: 'user-images',
items: [
jsonAnnotations
]
}]
}
};
}
But, Its not getting loop and nothing showing in graph.
Any suggestions?
I have fixed this with following code. May be it will hep someone in future.
myArray.map((item, index) => {
jsonTextValues.push({
label: item.TextTitle, value: item.value
});
jsonAnnotations.push({
id: 'dyn-label-bg',
color: '#000000',
align: 'left',
type: 'text',
text: `${item.TextTitle}`,
fontSize: 100,
x: '$canvasStartX+30’,
y: `$dataset.0.set.${index}.ENDY-20`
});
});
}
if (data != nil) {
const graphData = {
chart: {
subcaptionFontSize: '14',
numDivLines: ‘1’,
yAxisMinValue: '0',
yAxisMaxValue: '100',
showYAxisValues: '0',
paletteColors: ‘red’,
useDataPlotColorForLabels: '1',
showPercentInTooltip: '0',
divLineAlpha: '0',
},
data: [
jsonTextValues
],
annotations: {
showBelow: '0',
autoScale: '1',
groups: [{
id: 'user-images',
items: [
jsonAnnotations
]
}]
}
};
}
So my scenario is that there is an "Edit" ,"Activate","Deactivate" button in the action column.
and there is a column called Status whose value will be either "ACTIVE" or "INACTIVE"
Is there any way i can show and hide these action buttons according to the value in the status column
i have to achieve something like in this attached screenshot
settings = {
columns: {
Status: {
title: 'Status'
, class: 'align-centerr'
},
FullName: {
title: 'Full Name'
},
JobTitle: {
title: 'Job Title'
},
Department: {
title: 'Department'
},
EmailAddress: {
title: 'Email Address'
},
MobilePhone: {
title: 'Mobile No'
},
},
actions: {
edit: false,
// custom:[{}]
custom: [{ name: 'Edit', title: `<i class="fa fa-edit"></i>` },
{ name: 'Activate', title: `<i class="fa fa-toggle-on"></i>` },
{ name: 'Deactivate', title: `<i class="fa fa-toggle-off"></i>` }
],
},
delete: {
deleteButtonContent: '',
confirmDelete: true
},
add: null,
defaultStyle: false
,
I'm trying to convert following pseudocode:
{
app_id: 1,
help_id: 1234,
locale: 'en',
{
help_title: 'This is the title of the help entry',
help_description: 'This is the description of the help entry',
help_content: {[
{ type: 'text', title: '', description: '', style: { ... }},
{ type: 'image', title: '', description: '', url: '', style: { ... }},
{ type: 'image', title: '', description: '', url: '', style: { ... }},
{ type: 'video', title: '', description: '', url: '', style: { ... }},
{ type: 'link', title: '', description: '', url: '', style: { ... }},
{ type: 'svg', title: '', description: '', url: '', style: { ... }},
{ type: 'pdf', title: '', description: '', url: '', style: { ... }},
{ type: 'document', title: '', description: '', url: '', style: { ... }},
]}
},
locale: 'da',
{ ... }
To actual code, here is what I have so far:
var mongoose = require('mongoose')
var Schema = mongoose.Schema
var HelpitemSchema = new Schema({
app_id: { type: Number },
help_id: { type: Number },
locale: { type: String },
details: { [
{help_title: { type: String },
help_description: {type: String}}
] }
})
But I'm getting a:
[eslint]
Parsing error: Unexpected token
9 | {help_title: { type: String },
10 | help_description: {type: String}}
> 11 | ] }
| ^
12 | })
[js] ':' expected.
Should I try using sub docs or am I missing something syntax-wise?
Any help would be greatly appreciated.
You can try to create a contentSchema and then use it in HelpitemSchema :
var contentSchema = new Schema( {
type: String,
title: String,
description: String,
style: Mixed
});
var HelpitemSchema = new Schema({
app_id: { type: Number },
help_id: { type: Number },
locale: { type: String },
details: {
help_title: { type: String },
help_description: { type: String },
help_content: [contentSchema]
}
});
Take a look here for more details
Below is code for Store where i have hardcoded data for testing.
`Ext.regStore('CalendarStore', {
model: 'CalendarModel',
sorters: [{
property: 'id',
direction: 'ASC'
}],
proxy: {
type: 'localstorage',
id: 'calendar-app-store'
},
data: [
{ id: 1, title: 'January', image: 'jan.iPNG'}
, { id: 2, title: 'Febuary'}
, { id: 3, title: 'March'}
, { id: 4, title: 'April'}
, { id: 5, title: 'May'}
, { id: 6, title: 'June'}
, { id: 7, title: 'July'}
, { id: 8, title: 'August'}
, { id: 9, title: 'September'}
, { id: 10, title: 'October'}
, { id: 11, title: 'November'}
, { id: 12, title: 'December'}
]
});`
and i am trying to load image i.e 'jan.iPNG' which i have in store and source changes with month.i am able to display month name from {title} but not from {image}.All i get is a ?mark on the app.
I read that if i get ? mark then the src path is incorrect but if i give
'html : '<img style="height: 700px; width: 500px;" src="jan.iPNG "/>' '
it displays fine.
below is the view
'CalendarApp.views.viewCalendar = new Ext.form.FormPanel({
id: 'viewCalendar',
scroll: 'true',
items:[{
xtype: 'textfield',
name: 'title'
// label: 'title'
},
{
xtype: 'panel',
name :'image',
html : '<img style="height: 700px; width: 500px;" src="{image}"/>'
}],
dockedItems:[CalendarApp.views.calTopToolbar]
});'
First save the image in custom folder where your files are present.
and use below code,
{
xtype: 'panel',
icon: 'jan.png', // specify the path of the image
width:100, // if u want to specify the width for image
height:80, // if u want to specify the height for image
iconMask: false,
handler: jan // if u want to handle the click event
}
another option is u can define the image in html file by
<style>
.NewIcon {
-webkit-mask-box-image: url('../img/new_icon.png');
}
</style>
and specify this New icon in the js file where you want to use it
{
xtype: 'panel',
iconCls: 'NewIcon ',
width:100,
height:80,
iconMask: false,
handler: newicon
}