I want to make a default value of the select option using vue.js
here is my code
<v-select
v-model="contact.title"
:options="['Mr','Mrs','Ms']">
</v-select>
and
export default {
props: {
contact: {
type: Object,
required: true,
},
titles: {
type: Array,
required: true,
},
},
};
thanks
Try this.I think this will work.
<v-select
v-model="selected"
:options="options">
</v-select>
data: () {
return {
selected: 'Option 1',
options: ["Option 1","Option 2","Option 3"]
}
},
Mutating a prop is not best practice in vue.
You could do it like:
<v-select
v-model="selected"
:options="['Mr','Mrs','Ms']">
</v-select>
data: function () {
return {
selected: '' || 'defaultValue'
}
},
This way you are not mutating the prop and you easily can set a default value.
If you want to pass the data to the parent look at:
Pass data to parent
Related
Know how do I understand the selection field of a v-autocomplete by assigning it to a button.
The memory is even cleared, but the selection field is still the selected item.
Can anyone help me in this case? Any solution?
<Autocomplete
#getItemSelecionado="receberAno"
:items="anos"
label="Ano"
placeholder="Selecione um ano"
/>
clear() {
this.anoSelecionado = "";
this.areaSelecionada = "";
this.instituicaoSelecionada = "";
this.tituloSelecionado = "";
this.orientadorSelecionado = "";
this.pesquisadorSelecionado = "";
this.filtros = {};
},
The Autocomplete used above is a component created from the v-autocomplete below:
<template>
<v-autocomplete
:label="label"
:placeholder="placeholder"
v-model="select"
:items="items"
:item-text="itemText"
:disabled="disable"
outlined
:multiple="multiple"
:chips="chips"
flat
filled
color="#277049"
clearable
>
</v-autocomplete>
</template>
<script>
export default {
name: "AutocompleteAtom",
props: {
color: {
type: String,
},
label: {
type: String,
},
placeholder: {
type: String,
},
items: {
type: Array,
},
itemText: {
type: String,
},
disable: {
type: Boolean,
},
multiple: {
type: Boolean,
},
chips: {
type: Boolean,
},
},
data: () => {
return {
select: null,
};
},
You assign the v-model to variable "select" in component data.
And the value of this input is storage only in this child component. You can pass it to parent component by #onChange event and $emit.
Documentation: https://vuejs.org/guide/components/events.html
You can also assign prop as a v-model and passing it from parent component.
For example:
<Autocomplete
#getItemSelecionado="receberAno"
:items="anos"
:value="value"
label="Ano"
placeholder="Selecione um ano"
/>
I have two v-data-tables that are being rendered in a component. The first one is imported from another file as the matching-game-crud-table. This is the answer table. This first table manipulates information for the answerObject array, which is also used in the second tables to populate the v-select dropdown element. The first table (answer table) is set up like this below. Its items are updating the answerObjects on the main file.
<template>
<v-container>
<v-data-table
:headers="tableHeaders"
:items="items"
class="elevation-1"
>
<template #[`item.display`]="{item}">
<v-text-field
v-model="item.display"
:hide-details="true"
dense
outlined
:autofocus="true"
label="Display"
>
<!-- <v-icon v-if="header.draggable" slot="prepend"
>mdi-drag-vertical</v-icon
> -->
</v-text-field>
</template>
</v-data-table>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
import _ from 'lodash'
export default {
components: { draggable },
props: {
headers: { type: Array, required: true, default: [] },
defaultItem: { type: Object, required: true, default: {} },
allowDrag: { type: Boolean, required: false, default: false },
useModal: { type: Boolean, required: false, default: false },
data: { type: Array, required: true, default: [] },
},
data: () => ({
dialog: false,
dialogDelete: false,
items: [],
editedIndex: -1,
editedItem: {},
}),
computed: {
tableHeaders() {
let new_headers = JSON.parse(JSON.stringify(this.headers))
new_headers.push({
text: 'Actions',
value: 'actions',
sortable: false,
})
return new_headers
},
},
mounted() {
this.items = _.cloneDeep(this.data)
this.editedItem = _.cloneDeep(this.defaultItem)
},
created() {},
methods: {
addNew() {
console.log('add new')
const addObj = _.cloneDeep(this.defaultItem)
addObj.id = this.items.length + 1
this.items.push(addObj)
this.$emit('input', this.items)
},
},
}
The main page is set up like this. This is the page where you can see the second v-data-table with the v-select that is using the answerObjects array. The matching-game-crud-table is the file that utilizes the first table. There is a watch set up for the answerObject on the main file so that it is updated with the newest empty answer object from the matching-game-crud-table component.
<matching-game-crud-table
:headers="headers"
:default-item="default_item"
:data="answerObjects"
allow-drag
v-model="answerObjects"
></matching-game-crud-table>
<v-data-table
:headers="promptHeaders"
:items="prompts"
class="elevation-1"
>
<template #[`item.answer`]="{item, index}">
<v-select
:hide-details="true"
v-model="item.answer"
:items="answerObjects"
item-text="display"
item-value="display"
outlined
dense
label="Choose an answer value"
#input="change($event, true)"
></v-select>
</template>
</v-data-table>
<script>
import draggable from 'vuedraggable'
import _ from 'lodash'
import MatchingGameCrudTable from '../../MatchingGameCrudTable.vue'
export default {
name: 'MatchingGame',
components: { MatchingGameCrudTable, draggable },
props: {
value: { type: String, required: true },
data: { type: Object, required: true },
},
watch: {
answerObjects(newData, oldData) {
console.log(newData)
this.items = [newData]
console.log(this.items)
// this.mainBucket = this.setMainBucket()
},
},
data(){
return{
default_item: {
id: 0,
display: '',
feedback: '',
},
prompts: [],
answerObjects: [],
items: [],
}
}
</script>
The issue that seems to be happening is that if I add a new Answer to the answer table, then the addNew function is called and updates the answerObjects array with an empty answer object. For some reason if I also have an empty prompt object on the second table that has not been filled in yet, so the prompt.answer key is "". Then the v-select will take on the empty answer objects as the prompts answer. So as I fill in an answer in the empty answer object. The prompt answer is linked and is updated along with it. But the prompt answer is still "", it is just updating the v-select dropdown. I want the v-select to remain unchosen. And then the dropdown should populate with the answer value, but the user should be manually selecting it. I am unsure of why this link is occuring
I would suggest u fetch data from a central state like vuex, if the v-select is triggered on the first table it alters the state, then the second table uses the altered state
thanks for reading my question. I've a dynamic table and I'm trying to use a prop in v-slot, like bellow:
<v-data-table :headers="chooseHeader" :items="chooseItem" :search="search">
<template v-slot:[`item.iconValue`]>
<v-icon> mdi-clipboard-edit-outline </v-icon>
</template>
</v-data-table>
<script>
export default {
name: 'EasyHrPerformanceEvaluationListsNewSolicitation',
props: {
iconValue: {
type: Object,
required: false,
},
chooseHeader: {
type: Array,
required: true,
},
chooseItem: {
type: Array,
required: true,
},
},
I call the component EasyHrPerformanceEvaluationListsNewSolicitation to pass the prop values:
<EasyHrPerformanceEvaluationListsNewSolicitation
:title="$t('Novas Avaliações')"
:chooseHeader="selfEvaluationsHeader"
:chooseItem="selfEvaluations"
:iconValue="makeEvaluation" //v-slot value
>
</EasyHrPerformanceEvaluationListsNewSolicitation>
Bellow is my page, if you have a look you can se the column "avaliar" isn't working (my v-slot)
enter image description here
Is possible to use the prop value bellow in my v-slot?
iconValue: {
type: Object,
required: false,
},
Can you help me?
I think from the syntax you are using vuetify data table. And as per the doc's, slots are to be written like this.
<template v-slot:[`item.iconValue`]="{item}">
Refer -> https://vuetifyjs.com/en/components/data-tables/#item
I'm running again another issue on my code, that although I can save the v-select component. I have 2 of these, the another is good in which the type items are object. The problem is by clicking edit button and passing value from child component to parent component, when I console the issue in edit method, I can see the output in console but it does not display on the imported component which is claimsdropdown. And when I update the another v-select imported component named type, the claimsdropdown value is passing null, that although it has already value in it based on fetching from database.
Here is my v-select component stuff:
<template>
<v-select
:items="items"
item-text="text"
item-value="value"
v-model="selected"
return-object
:menu-props="{ bottom: true, offsetY: true }"
append-icon="fas fa-chevron-down"
placeholder="Claims"
outlined
dense
/>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "ClaimsDropdown",
data: () => ({
items: [
{
text: "Yes",
value: true
},
{
text: "No",
value: false
}
]
}),
computed: {
...mapState({
selected: state => state.projects.selected
}),
selected: {
get() {
return this.$store.state.projects.selected;
},
set(item) {
this.$store.commit("projects/SET_SELECTED", {
selected: item.value
});
this.$store.commit("projects/SET_FILTER_IS_CLAIMED", {
is_claimed: item?.value
});
}
}
}
};
</script>
<style scoped></style>
Parent Component:
<v-row>
<v-col cols="4">
<ClaimsDropdown v-model="this.selected.claim" />
</v-col>
</v-row>
on my computed:
computed: {
...mapState({
selected: state => state.projects.selected
})
}
and on method edit:
this.selected.claim = getFilterPresetsData.filters.claimed;
console.log({checkingClaim: this.selected.claim}); //display whatever the value from database.
Vuex: projects >name of vuex store
state: selected: null
my brain got drain by this one.
I'm creating an application that has a selection box to choose between some template data. However, the user should be able to select the same template option several times and, each time he selects the template, a new informational box appears in the screen.
My problem is that the v-autocomplete component doesn't enable this kind of behavior: we can select one option (or multiple options), but not the same option twice.
I thought about making something like this: every time the user selects the option A, the infobox would appear below and the component would reset to a empty option. Then, the user could choose option A again and, when he chooses it, another info box would appear, how many times the user needs it.
How could I do something like this using vue? I didn't found any component that would do something like this on default, so I think I'll have to tweak the component behavior, but I don't know exactly where to start.
My template:
<template>
<div class="select-wrapper" id="selectBox">
<v-autocomplete
class="select-input"
:items="items"
:name="label"
placeholder="select item"
solo
:value="value"
#change="$event => onChange($event, items)"
item-text="name"
item-value="value"
:required="required"
:rules="[
value =>
!required ||
!!value ||
"required"
]"
></v-autocomplete>
</div>
</template>
And my Vue code:
<script lang="ts">
import { defineComponent } from "#vue/composition-api";
import Vue from "vue";
interface SelectItem {
name: string,
value: string
}
interface SelectBoxProps {
items: SelectItem[];
value: string;
onSelect: ({ target }: { target?: SelectItem }) => void;
hasResetSelection: boolean;
}
export default defineComponent({
name: "SelectBox",
props: {
label: String,
items: Array,
value: [String, Number],
onSelect: Function,
disabled: Boolean,
required: {
type: Boolean,
default: false
},
hasError: Boolean,
errorMessage: String,
hasResetSelection: {
type: Boolean,
default: false
}
},
directives: {
ClickOutside
},
setup({ onSelect, hasResetSelection }: SelectBoxProps) {
const onChange = (selectedValue: string, itemsArr: SelectItem[]) => {
const targetItem = itemsArr.find(i => i.value === selectedValue);
if (hasResetSelection) {
Vue.nextTick(() => {
console.log("onselect should reset value");
return onSelect({ target: { name: "", value: "" } });
});
}
return onSelect({ target: targetItem });
};
return {
onChange
};
}
});
</script>
This was my last attempt with Vue.nextTick, I already tried to tweak the component with ref() and it didn't work as well. Do you have any suggestions?
You can use another variable just to hold the input for the autocomplete component Like this:
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [{ name : 'hello', value : 1 }, { name : 'world', value : 2 }],
value : null,
values : []
},
methods: {
onChange() {
this.values.push(this.value)
this.$nextTick(() => {
this.value = null
})
},
}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
Values : {{values}}
<v-autocomplete
:items="items"
placeholder="select item"
solo
v-model="value"
item-text="name"
item-value="value"
#change="onChange"
/>
</v-container>
</v-app>
</div>