The v-select that I change the option is triggering the other v-select automatically, the operation is to be independent between them, the issue that I am unable to get this code right. Someone with more experience than I could help me with?
<v-data-table
:headers="headers"
:items="res"
item-key="Name"
class="elevation-23"
>
<template v-slot:item.path="{ item }">
<v-select
v-model="cSel"
:items="item.path"
></v-select>
</template>
</v-data-table>
data () {
return {
expanded: [],
singleExpand: false,
cSel: 'A',
res: [
{
fullName: 'name 1',
med: 'med 1',
startDate: 'start date 1',
path: ['A', 'B', 'C', 'D'],
},
{
fullName: 'name 2',
med: 'med 2',
startDate: 'start date 2',
path: ['A', 'B', 'C', 'D'],
},
],
totalRes: 0,
search: '',
loading: false,
options: {
page: 1,
itemsPerPage: 40,
},
headers: [
{ text: 'Name', value: 'fullName' },
{ text: 'Med', value: 'med' },
{ text: 'Start Date', value: 'startDate' },
{ text: 'Create ', value: 'path', width: '200' },
],
}
You're using only one cSel variable for all items. That's why one change affects every select component.
You could either include the variable in every item. So you'd have item.cSel.
Or you convert cSel to an object and access it with an identifier:
cSel: {}
<v-select
v-model="cSel[item.fullName]"
:items="item.path"
></v-select>
I used the fullName property in this case. As long as that's unique this solution should work but it would probably be better to have an id property.
Related
I'm using React Quill on my function-based component, but I'm having problems when I load content to it, I mean the onChange is called for several times in a row (100 times +) for no reason, this only happens when I pass value to it and load the value from data I parse and add to the editor.
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './Editor.local.css';
const Editor = ({ method, ...props }: any): any => {
return (
<pre style={{ width: '100%' }}>
<label className="llabel">{props.label}</label>
<ReactQuill
value={props.value}
onChange={(value: any) => method(value, props.index)}
modules={Editor.modules}
formats={Editor.formats}
bounds={'#root'}
placeholder={props.placeholder}
/>
</pre>
);
};
Editor.modules = {
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link'],
['clean']
],
clipboard: {
matchVisual: false,
},
};
Editor.formats = [
'bold',
'italic',
'underline',
'blockquote',
'list',
'bullet',
'link',
'image',
'header',
'strike',
'size',
'color',
'font',
'align',
'clean',
'direction',
'rtl'
];
export default Editor;
As per the load, just simply I add it to the item and show multi by items with description.
This is the code I used from material UI site. Every time I edit something, pressing ENTER or TAB will result in the following warning and won't proceed to next cell. Any ideas? TIA!
index.js:1 Warning: This synthetic event is reused for performance
reasons. If you're seeing this, you're accessing the method key on a
released/nullified synthetic event. This is a no-op function. If you
must keep the original synthetic event around, use event.persist().
import * as React from 'react';
import { DataGrid } from '#mui/x-data-grid';
function getFullName(params) {
return `${params.row.firstName || ''} ${params.row.lastName || ''}`;
}
function setFullName(params) {
const [firstName, lastName] = params.value.toString().split(' ');
return { ...params.row, firstName, lastName };
}
export default function ValueGetterSetterGrid() {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={defaultRows} columns={columns} />
</div>
);
}
const columns = [
{ field: 'firstName', headerName: 'First name', width: 130, editable: true },
{ field: 'lastName', headerName: 'Last name', width: 130, editable: true },
{
field: 'fullName',
headerName: 'Full name',
width: 160,
editable: true,
valueGetter: getFullName,
valueSetter: setFullName,
sortComparator: (v1, v2) => v1.toString().localeCompare(v2.toString()),
},
];
const defaultRows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon' },
{ id: 2, lastName: 'Lannister', firstName: 'Cersei' },
{ id: 3, lastName: 'Lannister', firstName: 'Jaime' },
{ id: 4, lastName: 'Stark', firstName: 'Arya' },
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys' },
];
I am trying to use ngx-graph in my project to draw a hierarchical graph. I have issue with links that connecting two nodes. I have tried all curve types, but not getting expected result.
Here is some code snippets:
HTML
[links]="links"
[nodes]="nodes"
[layoutSettings]="layoutSettings"
[curve]="curve"
[draggingEnabled]="false"
[panningEnabled]="true"
[enableZoom]="false"
[autoZoom]="true"
[autoCenter]="false"
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="100" [attr.height]="50" fill ="#fff" stroke-width ="1" stroke = "#000" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}</svg:text>
</svg:g>
</ng-template>
</ngx-graph>
TS
layoutSettings = {
orientation: 'TB'
};
nodes: Node[] = [
{
id: 'first',
label: 'Parent'
}, {
id: 'c1',
label: 'Child 1'
}, {
id: 'c2',
label: 'Child 2'
}, {
id: 'c3',
label: 'Child 3'
}
];
links: Edge[] = [
{
id: 'a',
source: 'first',
target: 'c1',
label: 'is parent of'
}, {
id: 'b',
source: 'first',
target: 'c2',
label: 'custom label'
}, {
id: 'c',
source: 'first',
target: 'c3',
label: 'custom label'
}
];
Output that I am getting is:
Expected output is:
Any help or suggestions would be appreciated Thank you.
I found answer for my own question. This can be achieved by custom layouts.
Here you can found a custom layout, which resolves my issue.
I am trying to get all the values from all actions. Currently I have two select actions (Pick a game and Pick a day). In the interactive_messages_callback I am getting the selected value only of the currently modified select.
Is there a way to get an array of values from all the actions like currentValues: [ os_type_selection: 'osx', day_selection: '2' ]?
bot.reply(message, {
attachments: [
{
title: 'Question 1',
callback_id: 'question_1',
attachment_type: 'default',
actions: [
{
name: 'os_type_selection',
text: 'Pick a game...',
type: 'select',
options: [
{
text: 'Mac OS X',
value: 'osx',
},
{
text: 'Windows',
value: 'windows',
}
]
}
],
},
{
title: 'Question 2',
callback_id: 'question_2',
attachment_type: 'default',
actions: [
{
name: 'day_selection',
text: 'Pick a day...',
type: 'select',
options: [
{
text: 'Monday',
value: '1',
},
{
text: 'Tuesday',
value: '2',
},
]
},
],
},
],
});
// interactive_messages_callback
{ type: 'interactive_message_callback',
actions:
[ { name: 'day_selection',
type: 'select',
selected_options: [Object] } ],
callback_id: 'question_2',
team: { id: 'T02L9R6LX', domain: 'hellephant' },
channel: 'D9066R5NC',
user: 'U4C2DDM9T',
action_ts: '1517489936.972094',
message_ts: '1517489928.000257',
attachment_id: '2',
token: 'f5LpbwCQ2D97BhNOPgn1Gotb',
is_app_unfurl: false,
original_message:
{ type: 'message',
user: 'U90RBPAE6',
text: '...',
bot_id: 'B90UUGKSR',
attachments: [ [Object], [Object] ],
ts: '1517489928.000257' },
response_url: 'https://hooks.slack.com/actions/T02L9R6LX/309104841078/xsmwspjpdhV1oSW06PQkQZp5',
trigger_id: '308368498005.2689856711.9425688de7f023516061a4e4b2701322',
raw_message:
{ type: 'interactive_message',
actions: [ [Object] ],
callback_id: 'question_2',
team: { id: 'T02L9R6LX', domain: 'hellephant' },
channel: { id: 'D9066R5NC', name: 'directmessage' },
user: { id: 'U4C2DDM9T', name: 'davidnovak' },
action_ts: '1517489936.972094',
message_ts: '1517489928.000257',
attachment_id: '2',
token: 'f5LpbwCQ2D97BhNOPgn1Gotb',
is_app_unfurl: false,
original_message:
{ type: 'message',
user: 'U90RBPAE6',
text: '...',
bot_id: 'B90UUGKSR',
attachments: [Object],
ts: '1517489928.000257' },
response_url: 'https://hooks.slack.com/actions/T02L9R6LX/309104841078/xsmwspjpdhV1oSW06PQkQZp5',
trigger_id: '308368498005.2689856711.9425688de7f023516061a4e4b2701322' },
_pipeline: { stage: 'receive' },
text: '2' }
No. You can not have multiple interactive menus on the same message in Slack. Its technically possible, but once the user selects one menu it will always fire for that menu, making it impossible for the user to select from multiple menus at the same time.
If you want to use multiple menus you need to spread them out over separate messages and let the user select one after the other.
Or check out the dialog function, which allows you to use multiple menus at the same time.
I'm working on a grid with a remote filter. So, i set a field in a grid column header.
My question is,
How can i get the field value without field-id ??
See the example below
Thank You
You might be able to bind the value config of your textfield (the textfield in your items of the column header) to an attribute in a view model.
Something like :
var vm = Ext.create('Ext.app.ViewModel', {
data: [{
test : ''
}],
alias: 'viewmodel.myviewmodel',
stores: {
simpsonsStore: Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
data:[
{'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234"},
{'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244"},
{'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254"}
]
})
}
});
var grid = Ext.create('Ext.panel.Panel', {
height: 400,
width: 400,
renderTo: Ext.getBody(),
viewModel: vm,
layout: 'hbox',
items:[{
xtype: 'button',
bind: {
text: '{test}'
}
},{
xtype: 'grid',
flex: 1,
bind: '{simpsonsStore}',
columns: [{
text: 'Name',
dataIndex: 'name',
items: [{
xtype: 'textfield',
bind: {
value: '{test}'
}
}]
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}]
}]
});
PS : here is the fiddle ;) https://fiddle.sencha.com/#fiddle/15j6 you can type in your header filed, the button text will updated automatically :)