I am developing a polymer component so:
<dom-module id="form-list">
<template>
<div>{{title}}</div>
<form>
<template is="dom-repeat" items="{{inputAndLabel}}">
<div>
<label>{{item.tag}}</label>
<input type="{{item.type}}" value="{{item.defaultValue}}">
</div>
</template>
</form>
</template>
<script>
Polymer({
is: 'form-list',
ready: function() {
this.title = 'Formulario: Usuario',
this.inputAndLabel = [
{defaultValue: '', type:'text', tag:'Nombre' },
{defaultValue: '', type:'text', tag: 'Apellido' },
{defaultValue: '', type:'text', tag:'Email' },
{defaultValue: '', type:'text', tag: 'Dirección' },
];
}
});
</script>
</dom-module>
This portion of code, I am adding that inside element,
this.inputAndLabel = [
{defaultValue: '', type:'text', tag:'Nombre' },
{defaultValue: '', type:'text', tag: 'Apellido' },
{defaultValue: '', type:'text', tag:'Email' },
{defaultValue: '', type:'text', tag: 'Dirección' },
];
How to load the data from another file? Or from file that is using this component <form-list>
Related
I am using Vuetify <v-data-table>.
How to add button on table header <th>?
This code is what I have tried so far.
<v-data-table v-model="selected" :headers="headers" :items="desserts">
<template slot="items" slot-scope="row">
<th><button>button</button></th>
</template>
</v-data-table>
<script>
export default {
data:() =>({
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: true,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
});
</script>
Please help.
You can use the header.<fieldname> slot template.
For example, to target the first column, name:
<v-data-table v-model="selected" :headers="headers" :items="desserts">
<template v-slot:header.name="{ header }">
{{ header.text }}
<v-btn>Button</v-btn>
</template>
</v-data-table>
$(".editor").each(function () {
let id = $(this).attr('id');
ClassicEditor
.create(document.querySelector('#'+id), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','imageUpload' ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
headers: {
tokenUrl: '{$csrf_token}'
},
uploadUrl: '/admin/settings/ajax-upload-photo',
},
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
},
})
.then(function (editor) {
console.log(editor);
})
.catch(function (error) {
console.error(error);
});
});
please use csrf() in your html form
<form>
<?= Html::hiddenInput(Yii::$app->request->csrfParam, Yii::$app->request->csrfToken); >
</form>
or
$(".editor").attr({
type: 'hidden',
name: '_csrf'
value: $('meta[name=csrf-token]').attr("content");
}).appendTo('form');
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:
I am having issues navigating to a grand child route. The default route for the paths for the grand child works. When I am trying to navigate to the 'text' route, it doesn't recognize the route.
I have the following routes setup:
{
path: '',
pathMatch: 'full',
component: EmailListComponent,
children:[
{
path: '',
component: EmptyComponent
}
]
},
{
path: 'editor',
pathMatch: 'full',
component: EmailListComponent,
children: [
{
path: '',
component: MessageEditorComponent,
children: [
{
path: 'text',
component: TextActionBarComponent,
},
{
path: '',
component: NoActionBarComponent,
}
]
},
]
}
I am trying to navigation this route using:
this.router.navigate(['/editor/text'], {});
I have also tried
this.router.navigate(['text'], {});
and
this.router.navigate(['/text'], {});
Hi i'm new to Sencha and i'm try to set json request data to filedset. But it does not work. Please help me i cannot find the error.
this is my json request data:
{"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}}
And this is the code.
Ext.define('AIOS_vis.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
listeners: {
activate: function() {
alert('gr');
Ext.data.JsonP.request({
url: 'http://localhost:8080/mock/GetCtPwer.php',
method: 'POST'
callbackkey: 'callback',
params: {
tap_id: 1
},
scope: this, /// fix handler scope
callback: function (response, value, request) {
var wattComponent = Ext.getCmp('watt');
wattComponent.setValue(value.response.electric_power);
var ampereComponent = Ext.getCmp('ampere');
ampereComponent.setValue(value.response.electric_current);
},
failure: function (response, request) {
Ext.Msg.alert(response);
}
});
}
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Visual',
},
{
xtype: 'fieldset',
instructions: 'Last Update: 2014/02/06:12:45:23',
items: [
{
xtype: 'button',
text : 'current',
height: '40px',
},
{
xtype: 'textfield',
id: 'watt',
label: 'Wattage (W):',
text: '1890.9W'
}, {
xtype: 'textfield',
id: 'ampere',
label: 'Amperage (A):',
text: '18.91A'
}]
},
{
xtype :'titlebar',
style: 'background:#484848',
title : 'power</br>123.4Wh',
height: '100px'
}
]}
]
},
});
Change your webservice url to (for example) http://yoururl.com:8080/mock/GetCtPwer.php?jsonp=parseResponse
and make sure your webserice is responding this:
parseResponse({"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}})
you can change "parseResponse" to whatever you want.