<template>
<div class="accordion-body">
<div class="mb-3" v-if="itemsList">
<select
class="form-select"
size="4"
multiple
aria-label="multiple select example"
v-model="itemSelected"
>
<option v-if="itemsList.length === 0" disabled
>Значений нет, добавьте новое</option
>
<option v-else disabled>Выберите значение</option>
<option
v-for="item in itemsList"
:key="item.id"
:value="item._id"
>{{ item.value }}
</option>
</select>
<button
class="btn btn-sm btn-outline-danger mt-2"
type="button"
@click="removeItem(itemSelected[0])"
>
Удалить
</button>
</div>
<div class="input-group">
<input
type="text"
:class="['form-control', { 'is-invalid': qError }]"
:placeholder="placeholder"
:aria-label="placeholder"
aria-describedby="button-addon2"
v-model="newItem"
@blur="qBlur"
@change="qChange"
/>
<button
class="btn btn-outline-secondary"
type="button"
@click="onSubmitNewItem"
>
Добавить
</button>
</div>
<div class="form-text text-danger" v-if="qError">
{{ qError }}
</div>
</div>
</template>
<script>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useField, useForm } from "vee-validate";
import * as yup from "yup";
export default {
props: {
storeName: { type: String, required: true },
placeholder: { type: String, required: true },
error: { type: String, required: true },
},
setup(props) {
//подключаем store
const store = useStore();
//выбранное значение из select
const itemSelected = ref([]);
//
const { isSubmitting, handleSubmit, resetForm } = useForm();
const {
value: newItem,
errorMessage: qError,
handleBlur: qBlur,
handleChange: qChange,
} = useField(
"newItem",
yup
.string()
.trim()
.required(props.error)
);
//загрузка значений:
onMounted(async () => {
//выполнение в store экшена load
await store.dispatch(`${props.storeName}/load`);
});
// возвращаем значение itemsList из store (берем список значений из store)
const itemsList = computed(
() => store.getters[`${props.storeName}/itemsList`]
);
//добавить новое значение:
const submitnewItem = async (values) => {
// вызываем метод create для создания записи в БД
await store.dispatch(`${props.storeName}/create`, values);
//обновить список:
await store.dispatch(`${props.storeName}/load`);
//очистка поля ввода
resetForm();
};
const onSubmitNewItem = handleSubmit(submitnewItem);
//удалить значение:
const removeItem = async (id) => {
await store.dispatch(`${props.storeName}/remove`, id);
//обновить список:
await store.dispatch(`${props.storeName}/load`);
//очистить список значений на удаление:
itemSelected.value = [];
};
return {
itemsList,
removeItem,
itemSelected,
isSubmitting,
onSubmitNewItem,
newItem,
qError,
qBlur,
qChange,
resetForm,
};
},
};
</script>let users = await Promise.all(data.map((u) => fetch(u).then((r) => r.json())));'h'.charCodeAt(0)
<svg
width="3840"
height="1202"
viewBox="0 0 3840 1202"
fill="none"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
>
<defs>
<filter id="filter0_d_380:12132" x="-54" y="0" width="3907" height="1202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-9"/>
<feGaussianBlur stdDeviation="6.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_380:12132"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_380:12132" result="shape"/>
<filter>
<linearGradient id="paint0_linear_380:12132" x1="1900.47" y1="245.905" x2="1899.95" y2="1002.27" gradientUnits="userSpaceOnUse">
<stop stop-color="#3B76B0"/>
<stop offset="1" stop-color="#4D94C2"/>
</linearGradient>
</defs>
</svg>
1 - (1 - 0.01)100 = 0.634 = 63.4%
99.99% = 0.9999 = 1 - (1 - 0.01)x, x = log0.990.0001 = 916 циклов ~ 45.8 cек.