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.
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',
},
],
},
};
Using Ant Design in Vue. In a Multi-select component, user is able to select and unselect associated objects. However, the existing tokens of preexisting associated objects should show the item.name, but instead show "undefined". It also does not show a checkmark next to existing objects in the select box. However, on submit, the "undefined" object is submitted correctly. New choices display within the select box correctly.
Here is the element in the view:
<a-form-item :label="`${contact.name}'s Outlets`"
:wrapperCol="{lg: {span: 20}, sm: {span: 24} }">
<a-select
mode="multiple"
v-model="contact.outlets"
style="width: 100%"
placeholder="Please select"
>
<a-select-option v-for="outlet in outlets" :key="outlet.name" :value="outlet.id">
{{ outlet.name }}
</a-select-option>
</a-select>
</a-form-item>
As indicated in comments, you used an object element in contact.outlets[] for the initial value of the select. However, the a-select's value properties are bound to each element's id, so no match is found:
<a-select-option
v-for="outlet in outlets"
:key="outlet.name"
:value="outlet.id" 👈 option value is an `id`
>
Solution
Instead of the object as initial value, use the object's id.
Composition API
export default {
setup() {
const outlets = reactive([
{ id: 1, name: 'Outlet A' },
{ id: 2, name: 'Outlet B' },
👇
{ id: 3, name: 'Outlet C' },
]); 👇
const contact = reactive({ name: 'John', outlets: [3] });
return { outlets, contact };
}
}
demo 1
Options API
export default {
data() {
const outlets = [
{ id: 1, name: 'Outlet A' },
{ id: 2, name: 'Outlet B' },
👇
{ id: 3, name: 'Outlet C' },
]; 👇
const contact = { name: 'John', outlets: [3] };
return { outlets, contact };
}
}
demo 2
I want to make a function to sum up the value in data with vue.js but I don't know how to code it.
var quiz = {
questions: [
{
text: "who am I?",
responses: [
{ text: "John", value: 1000 },
{ text: "James", value: 2000 },
{ text: "Lucy", value: 3000 },
{ text: "Mari", value: 4000 }
]
},
{
text: "What do you want to be?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
},
{
text: "How old are you?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
}
]
}
and html code
<template v-if="resultOne">
<p>First result</p>
</template>
I had a following data like this, and I want to make some v-if code by using the value of them.
For example, if the sum of value become 1020, 1030, 1040, and 1050, I want to show "resultOne."
How can I make a code like this?
It's difficult to give you a complete answer as I don't know where quiz is coming from. Is it hardcoded or is it dynamic?
But either way, here is a method you can use to calculate the total value of the data:
const totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
If the data is static then I would suggest just doing the calculation inside a created() hook and storing it in a data prop.
like:
data() {
return {
totalValue: 0
}
},
created() {
this.calculateValue();
},
methods: {
calculateValue() {
this.totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
}
}
and then your v-if is simply v-if="[1020, 1030, 1040, 1050].includes(totalValue)"
If quiz is more dynamic then you can try to use a computed method.
how can i do something like that in React-Native:
data = [
{id:1,title:'Action',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
{id:2,title:'Horror',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
]
Every time the query string is updated, look for the game within the category.
Returns only the categories that contain a game with the searched characters.
Thank you! :D
I don't know if I understand your question correctly. This is my solution.
If you query for "Game5" you will get whole object that contains query
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game4" },
{ id: 2, title: "Game5" },
{ id: 3, title: "Game6" },
],
},
];
const query = "Game5";
const result = data.find((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
You can use 'filter' instead of 'find' and result will be an array.
This is example of filter version. I add one more category so you can see how it filter
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game2";
const result = data.filter((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
And you might want to look at life cycle componentDidUpdate if you write class component, but if you write function component you might want to use useEffect
This is official react hook explaination
EDIT: from your comment you might want something like this
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game5";
let result = null;
data.forEach((category) => {
const game = category.games.filter((g) => g.title === query);
if (game.length) result = { ...category, games: game };
});
console.log(result);
I have problem. Can't get value from select using vue strap select.
My html code:
<bs-select
v-model="select.value"
:options="select.options"
options-value="val"
justified
close-on-select
placeholder="Chose action"
#change="contract_corresponds_activity"
></bs-select>
I tried :value.sync except v-model as well.
My js code:
import {input, checkbox, select, option} from 'vue-strap'
export default {
components: {
'bs-select': select,
},
data () {
return {
select: {
options: [
{val: 0, label: 'unknown'},
{val: 1, label: 'plus 1'},
{val: 2, label: 'plus 2'},
{val: 4, label: 'plus 4'},
{val: 6, label: 'plus 6'}
],
value: ''
}
},
methods: {
some_function () {
alert(this.select.value)
axios.post(this.api_url + this.$route.params.id + '/domgmt', { value: this.select.value
}).then(response => {
this.update_form_data(response.data)
}).catch(error => {
this.errors = error.response.data.errors
})
}
}
This code gave me select option, but i cant save it to variable value. My post request is empty string, same as my alert gives me nothing. My goal is to send value: 1, 2, 4, 6 or 0.
The problem is that i should add parametr to on change event so code will look like:
some_function (value) {
alert(value)
axios.post(this.api_url + this.$route.params.id + '/domgmt', { value: value
}).then(response => {
this.update_form_data(response.data)
}).catch(error => {
this.errors = error.response.data.errors
})
}
In that case it will show what i've clicked just now