I want the result in this field, which is displayed as suggested, to be from descending to ascending.
<!-- city -->
<div class="col-md-6">
<label class="form-label fw-bold w-100">{{ $t('post code') }}
<v-select v-model="form.postCode" :disabled="!form.country" label="name" :filterable="false"
class="my-1"
:options="postCodes"
:class="{ 'is-invalid': form.errors.has('postCode') }"
#search="onSearch"
>
<template slot="no-options">
Please enter 2 or more characters
</template>
<template #search="{attributes, events}">
<input
class="vs__search"
:required="!form.postCode"
v-bind="attributes"
v-on="events"
>
</template>
</v-select>
</label>
<has-error :form="form" field="postCode" />
</div>
</div>
How can i ?
You can create computed property and array sort inside of that computed property and return the result from that property. You can also check this post for more information: array sort
More information about computed properties: https://v2.vuejs.org/v2/guide/computed.html
Related
I have multiple select boxes which are rendered using a v-for loop, what I am trying to do is to store each option value for each select box in an array but when I select an option it only stores the chosen option, not multiple options
<template v-for="(gettailor) in gettailors" :key="gettailor.id">
<div class="col-sm-6" >
<div class="form-floating" >
<p>{{ gettailor.names }}</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating">
<select class="form-select shadow-none" id="tailors" v-model="tailors" required>
<template v-for="(item) in gettailor.tailor" :key="item.id">
<option :value="item.id">{{ item.tailor }}</option>
</template>
</select>
<label for="tailors">Choose {{ gettailor.names }}</label>
</div>
</div>
</template>
<script>
import { ref, watch,onMounted } from 'vue';
const tailors = ref([]);
</script>
I think tailors should be an object, then you bind the select value to a value in the object:
<select
class="form-select shadow-none"
id="tailors[]" <-------- generates several selects with same id
v-model="tailors[gettailor.id]" <--------- bind to object value
required
>
Of course you can also use an array, but it does not work well with reactivity if you use loop index as key (if order changes, you don't know where the values came from), and if you use tailor id, you get a sparse array, which is probably hard to work with.
basically what I'm trying to do is, I get the DateTime coming from my database along with some information of a possible meeting, if people are busy, they will have the option to extend that time through a combobox that pulls a enum in my backend which has values in milliseconds, description and id. As I get these values coming from my enum, I can extend the meeting, but I did this validation on the frontend through a function... where I get the value of the combobox, and add it to the dateTime coming from the BE, however, I can't change the database (legacy) to add a field to save the enum, and that's why I had to make an adapted function in the frontend, and the extension method is hardcoded and doesn't have a field in the BE it replicates the same combobox for all. pointing out that I can't pull the data still coming from my v-for to mounted() or data().
Please help me. I'm using Primevue.
i tried to catch the index/code coming from the v-for by #click the dropdown by creating the function in mounted(), but without success. When trying to manipulate this data, it returns me an undefined value enter image description here
my v-for loop
`<div
class="mt-2"
v-for="(item, index) in listaAlarme"
:key="index">
<!-- {{ item.codigo }}
{{ index }} :{{ listaAlarme[index].referencia }} -->
<Card class="cardContainer">
<template #content>
<div class="formgrid grid">
<UnoFormField
id="dateTimeReference"
:cols="4"
label="Date and Time">
<UnoFormCalendar
v-model="listAlarm[index].reference"
#click="handleAlterTime(index)"
:withTime="true" />
</UnoFormField>
<UnoFormField
id="extended"
:cols="3"
label="Extended">
<Dropdown
v-model="typeActivitiesExtend"
:options="typeActivitiesExtendList"
option-label="description"
option-value="milliSeconds"
placeholder="Extended"
:class="{
'w-full': true,
}"
class="p-dropdown-uno-trigger-black"></Dropdown>
</UnoFormField>
<UnoFormField
id="contact.name"
:cols="3">
<div class="phoneIcon">
<fa-icon
icon="phone"
#click="handleCall" />
</div>
</UnoFormField>
</div>
</template>
<template #footer>
<div class="formgrid grid">
<!-- <div class="flex"> -->
<UnoFormField
id="meeting"
:cols="3">
<Button
icon="pi pi-search"
class="p-button-uno-black"
#click="handleMeeting"></Button>
</UnoFormField>
<UnoFormField
id="description"
:cols="3">
<p class="text">
{{ listAlarm[index].shortDescription }}
</p>
</UnoFormField>
<div class="iconButtons">
<fa-icon
icon="ban"
class="banIcon"
#click="excludeItem" />
<fa-icon
icon="check"
class="checkIcon"
#click="onBtnSave" />
</div>
<!-- </div> -->
</div>
</template>
</Card>
`
the UnoFormField, is a label as you can see, that me return the label name and fied col just for display de fields with a size col in template
my function to extend the hours in methods:
i'm try to catch the value of datatime in v-for
`
showing values from url dynamically, already showing in table correctly, but i want show with div.
<vs-table ref="table" multiple v-model="selected" pagination :max-items="itemsPerPage" :data="products">
<template slot-scope="{data}">
<vs-tr :data="row" :key="index" v-for="(row, index) in data">
<vs-td>
<p>{{data[index].name}}</p>
</vs-td>
</vs-tr>
</template>
</vs-table>
now checking with this div
<template slot-scope="{data}">
<div v-for="(row1, index1) in data" v-bind:key="row1.id">
{{data[index1].name}}
</div>
</template>
this div code not working
If you are running these both on the same page it might have something to do with your :keys being on the same ID. e.g. set the keys with a prefix
<div v-for="(row, index) in data" v-bind:key="'div-'+row.id">
{{data[index].name}}
</div>
I'm using Vue (v2.6.11) and I want to add/remove a class on an ancestor (grandparent) element of an input (checkbox) when it's value is changed. There are an unknown number of checkboxes so they are generated using v-for on the element that I want to add/remove the class. I have a function registered with my Vue instance methods when the checkbox value is changed.
In my code below, the <label> is the element to which I want to add/remove the class in response to the checkbox value changing. I'm trying to resist the urge to apply an :id attribute to the label and then do a lookup in my updateCounter method that will use the id of the checkbox to find the label and add/remove the class using pure JS. Is there a more Vue-esque way to do this?
<label class="item"
v-for="item in myItems"
v-bind:key="item.id"
:for="'item'+item.id">
<div>
<input type="checkbox"
:id="'item'+item.id"
v-model="item.isAccepted"
#change="updateCounter($event)" />
<span>{{ item.name }}</span>
<span>{{ item.status }}</span>
</div>
<div>{{ item.date }}</div>
</label>
just use a dynamic class like so: :class="item.applyClass ? 'item' : ' ' " so put a property on the item and then you can dynamically change that in your updatedCounter function
You can do
<label class="item"
v-for="item in myItems"
v-bind:key="item.id"
:for="'item'+item.id"
:class="{test: item.isAccepted === true}">
<div>
<input type="checkbox"
:id="'item'+item.id"
v-model="item.isAccepted"
#change="updateCounter($event)" />
<span>{{ item.name }}</span>
<span>{{ item.status }}</span>
</div>
<div>{{ item.date }}</div>
This would apply test class only when is Accepted is true for that particular checkbox.
I have a component which returns locations, then places, then hotels one after her other but I want these in 3 different parts like they show in tabs.
component code:
<template>
<li class="col-xs-12" :id="location.id">
<p class="col-xs-3">{{location.name}} - Days : </p>
<div class="col-xs-2"><input type="text" v-model="location.days"></div>
<div class="col-xs-4">
<!-- {{hotelset(location.id,hotels)}}-->
<!-- {{typeof (hotels)}}{{index}}-->
<v-select v-model="hotelselect[location.id]" name="addhotel" label="title"
#input="addtohotel(index,location.id)" :value="non" :options=hoteloptions[location.id] />
<!--{{hoteloptions}}-->
<!--{{$props}}-->
</div>
<button #click="remove" class="col-xs-3 btn btn-danger">Remove</button>
<div></div>
<div class="col-xs-12" v-for="day in parseInt(location.days)" :key="day">
Day {{day}}-
{{preselect(day,defaultt,location.id,place)}}
<v-select v-model="days[day]" name="addplaceloc" label="title" #input="addtoplaces(day,location.id)"
:value="defaultt" :options="localplace[location.id][day]" multiple />
<!--{{localplace[location.id][day]}}-->
<div v-for="(placeinfo, index) in objj[location.id]['day-'+day]['place']">Place: {{placeinfo['title']}}:
<label>From:</label><input type="text"
v-model="objj[location.id]['day-'+day]['place'][index]['from_time']">
<label>To:</label><input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['to_time']">
<label>Remark:</label><input type="text"
v-model="objj[location.id]['day-'+day]['place'][index]['remark']">
<button #click="run"> yess</button>
</div>
</div>
</li>
<!--#click="remove"-->
in above code there are 2 v-select and 1 input listed one after the other as they are dependent to each other but I want it in different tabs in parent vue file. How to achieve it? tabs have its own style and html structure.
As #muka.gergely said, the only way to re-use HTML is to break it off into separate components.