cn-2k

<template>
    <div>
        <div class="date-examples">
            <div>
                <DatePicker
                    v-model="date"
                    :is-range="isRange"
                    :model-config="modelConfig"
                    is-required
                >

cn-2k

// Making post request using axios (with headers too)
axios
                .post('localhost', payload, {
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: 'Bearer ' + token,
                    },
                })
                .then(function (response) {
                    console.log(response)

cn-2k

<template>
<input type="file" @change="handleFileUpload($event)"/>
</template>

<script>
import axios from 'axios'
import { reactive, toRefs } from 'vue'

export default {

cn-2k

// It's just a piece of code.

const token = VueCookieNext.getCookie('token')
let formData = new FormData()

const state = reactive({
  photo: null,
})

formData.append('name', fullName.value)

cn-2k

                               <p class="mb-1 text-brand-mainDark">
                                    Select state | {{selectedState}}
                                </p>
                                 <Multiselect
                                    placeholder="Select state"
                                    :minChars="1"
                                    :required="true"
                                    autocomplete="undefined"
                                    v-model="selectedState"

cn-2k

// comparing by id
const output = yourFirstArray.filter((item1) => !yourSecondArray.some((item2) => item1.id == item2.id))
console.log(output)

// or
// attention: "id" is a variable of yourFirstArray filter method
const output = yourFirstArray.filter(({ id }) => !yourSecondArray.find(item => item.id == id));
console.log(output);

cn-2k

const multiValue = ref()
const groups = reactive([])

groups = datas.roles.map((item) => ({
                value: item.name,
                label: item.name,
            }))

<p>{{ multiValue }}</p>
                                <multiselect

cn-2k

const searchEntities = ref('')
const searchActions = ref('')
const loadingTable = ref(false)
const loadingRegister = ref(false)
const singleTable = ref(null)
const newEntity = ref(false)
const entityName = ref('')
const newAction = ref(false)
const actionName = ref('')

cn-2k

// first of all: props are for parent -> child and we can use emit for child -> parent

// parent-component.vue

<card-stats
  @goalReachedPercentage="getReachedGoalValue"
/>

const getReachedGoalValue = (percent) => {
    datas.indicatorGoalPercentage.push(percent)

cn-2k

<template>
    <DatePicker
        v-model="range"
        :model-config="modelConfig"
        :startDate="startDate"
        :endDate="endDate"
        is-range
        is-required
        color="green"
    >