I am facing an issue where I want to display more radio buttons upon selection of the the first radio buttons.
What I want to achieve is that I need to show the first three radio buttons, A,Band C. And when I select C, I want to display D and E radio buttons together.
Currently all the radio buttons are displaying
Here is the code for it:
<b-form-radio-group
id="radio-group-1"
v-model="selected"
:options="options"
name="radio-options"
>
</b-form-radio-group>
And the script:
data () {
return {
selected: null,
options: [
{ value: '1', text: 'A' },
{ value: '2', text: 'B' },
{ value: '3', text: 'C' },
{ value: '4', text: 'D' },
{ value: '5', text: 'E' },
]
}
}
Any suggestions?
Not sure what the value of selected will be however if its the integer.
data () {
return {
selected: null,
}
},
computed: {
options() {
let defaults = [
{ value: 1, text: 'A' },
{ value: 2, text: 'B' },
{ value: 3, text: 'C' },
];
if (this.selected >= 3) {
return [
...defaults,
{ value: 4, text: 'D' },
{ value: 5, text: 'E' },
];
}
return defaults;
}
},
Might be a better idea to make a seperate group however and only show it if the value of selected is c..
Related
TopBar are define as shown
I want to be able to decrease and spacing between multiple button, but their doesn't seem to be a way to achieve this
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
I've tried adding styling to each button definition but it doesn't seem to have that functionality
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
style: {
marginHorizantal: -10, <= ?
}
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
Below is the screenshot, where the first box is not selected right now, but i want to make it selected when come to first time on this page.
I attached the full expo-link. click-here
I want that 'soup' button selected as by-default.
currently it's working like when come to this page, no-one button is selected but after select the data appears on right black area.
In your Soup Screen First initlize your data array before your state and then set a default value in your userOption state like this.
export default function Soup({ navigation, item }) {
const data = [
{ id: 1, value: "Soup" },
{ id: 2, value: "Break fast" },
{ id: 3, value: "Appetizers" },
{ id: 4, value: "Snacks" },
{ id: 5, value: "Salads" },
{ id: 6, value: "Pasta" },
{ id: 7, value: "Burgers" },
{ id: 8, value: "Chicken" },
{ id: 9, value: "Kebab" },
{ id: 10, value: "Main dishes" },
{ id: 11, value: "Desert" },
{ id: 12, value: "Healthy dishes" },
];
const [option, setOption] = useState(null);
const [products, setProducts] = useState(productsList);
const [userOption, setUserOption] = useState(data[0].value);
const selectHandler = (value) => {
// onSelect(value);
setUserOption(value);
};
return <></>;
}
https://snack.expo.dev/HcZKyg9lR
Snack updated kindly check. I hope this help you out.
I am new in vue js. Using vue2, I have a v-select implemented on my site now, I want to select multiple values and save and show them while editing. But I can't show multiple values properly using :reduce
Here is my code:
<v-select name="allowed_extensions"
:reduce="allowed_extensions => allowed_extensions.value"
multiple
:closeOnSelect="false"
v-model="form.allowed_extensions"
:options="file_options"
v-validate="'required'" > </v-select>
In js:
data () {
return {
isDisabled: false, //Submit Button
form: {
maximum_file_size: '',
allowed_extensions: ''
},
be_errors: {},
// Options
file_options: [
{ label: 'doc', value: 'doc' },
{ label: 'docx', value: 'docx' },
{ label: 'pdf', value: 'pdf' },
{ label: 'txt', value: 'txt' },
{ label: 'gif', value: 'gif' },
{ label: 'png', value: 'png' },
{ label: 'jpg', value: 'jpg' },
{ label: 'jpeg', value: 'jpeg' }
]
}
}
IN Mysql DB, sample data saved as : ["doc","txt"]
But when I want to display them in edit, it showing wrongly in a single tag.
How can I solve this
I created Vue application and I have simple store:
const paginationStore = {
data: {
entitiesDisplayOptions: [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
],
paginationLimits: {
bottom: 0,
top: paginationStore.data.entitiesDisplayOptions[0].value
}
}
}
I'm getting error:
Uncaught TypeError: Cannot read property 'data' of undefined
Why I can't set value from entitiesDisplayOptions to paginationStore.data.paginationLimits.top? What should I do to make it works?
You could store it in a variable outside the definition:
const newEntitiesDisplayOptions = [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
];
const paginationStore = {
data: {
entitiesDisplayOptions: newEntitiesDisplayOptions ,
paginationLimits: {
bottom: 0,
top: newEntitiesDisplayOptions[0].value
}
}
}
There is lot of possibilities. Everything you have to do is to remember you can't reference the other object properties at the moment of creation of object in the form of object literal.
const entitiesDisplayOptions = [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
]
const paginationLimits = {
bottom: 0,
top: paginationStore.data.entitiesDisplayOptions[0].value
}
const paginationStore = {
data: {
entitiesDisplayOptions,
paginationLimits
}
}
I have 2 checkboxes, Its called A and B. When i click on the checkbox A, then all the a particular field in the Grid should filter all the values with the value A in it.
If i click B, then the filed in the grid should filter and display all the values that has B in it.
If i click both, then both A and B should be displayed.
if (chkbxVal== 'A') {
console.log('Only A');
return rec.get('gridField') == 'A';
} else if (chkbxVal == 'B'){
console.log('Only B');
return rec.get('gridField') == 'B';
} else {
console.log('both A and B');
return rec;
}
The above, works if i have 2 checkboxes. But what if i have 3 checkboxes (or more). Should i have 9 if-else conditions for it to work ? Look at the following prototype, it is only for 3 checkboxes, and i have like 6 or 7 then i should have 36 - 49 if-else conditions ? I am having a logic issue can someone help me ?
if (A){
// display A
} else if (B) {
// display B
} else if (C) {
//display C
} else if (A and B) {
//display A and B
} else if (A and C) {
// display A and C
} else if (B and C) {
//display B and C
} else {
// display all
}
No, that would not be a good idea. Here's an example, it only goes up to 'E' but the example scales:
Ext.require('*');
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['name', 'filterField']
})
Ext.onReady(function(){
var active = [];
function onBoxChange() {
active = [];
form.items.each(function(item){
if (item.checked) {
active.push(item.inputValue);
}
});
updateGrid();
}
function updateGrid() {
store.suspendEvents();
store.clearFilter();
store.filterBy(function(rec){
return Ext.Array.indexOf(active, rec.get('filterField')) > -1;
});
store.resumeEvents();
grid.getView().refresh();
}
var items = [];
Ext.Array.forEach(['A', 'B', 'C', 'D', 'E'], function(name){
items.push({
boxLabel: name,
xtype: 'checkbox',
inputValue: name,
checked: true,
listeners: {
change: onBoxChange
}
});
});
var form = new Ext.form.Panel({
flex: 1,
items: items
});
var store = new Ext.data.Store({
model: MyModel,
data: [{
name: 'A1',
filterField: 'A'
}, {
name: 'A2',
filterField: 'A'
}, {
name: 'A3',
filterField: 'A'
}, {
name: 'B1',
filterField: 'B'
}, {
name: 'B2',
filterField: 'B'
}, {
name: 'C1',
filterField: 'C'
}, {
name: 'C2',
filterField: 'C'
}, {
name: 'C3',
filterField: 'C'
}, {
name: 'D1',
filterField: 'D'
}, {
name: 'E1',
filterField: 'E'
}, {
name: 'E2',
filterField: 'E'
}, {
name: 'E3',
filterField: 'E'
}, {
name: 'E4',
filterField: 'E'
}]
});
var grid = new Ext.grid.Panel({
flex: 1,
store: store,
columns: [{
dataIndex: 'name',
text: 'Name'
}]
});
new Ext.container.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [form, grid]
});
});