Im trying to use a selected option value. Can't show the value or save it.
This is my child component
`
<script>
export default {
props: {
options : {
type:Array,
},
selectOpt:undefined,
}
emits : ['input','change','option:selected']
}
</script>
<template>
<div>
<h1>
Hi, I'm a component
</h1>
<select
v-model="selectOpt"
#change="$emit('input', event.target.value)">
<option v-for="option in options"
:key="option"
>{{option}}</option>
</select>
</div>
</template>
`
This is my parent
`
<script >
import Comp from './Comp.vue'
export default {
data() {
return {
options : [1,2,3,4,5,6],
optSelected : undefined,
}
},
components: {
Comp
}
}
</script>
<template>
<Comp v-model="optSelected" :options="options"></Comp>
<p>
--->{{optSelected}}
</p>
</template>
`
I tried changin the 'input' event and 'change' event. not sure what im doing wrong.
i've found a solution that requires a vue-select library that i prefer not to use.
It's a simple detail: in vue 3, you need to use update:modelValue in order to change the v-model in parent component. (Reference: https://v3-migration.vuejs.org/breaking-changes/v-model.html)
And another thing: you souldn't use the prop as a v-model to prevent side effects in your application. You can read more about it here: https://eslint.vuejs.org/rules/no-mutating-props.html
Hope it helps:
<script>
export default {
props: {
options: {
type: Array
},
modelValue: undefined
},
emits: ['update:modelValue'],
watch: {
innerValue(newValue) {
this.$emit('update:modelValue', newValue)
},
modelValue(newValue) {
this.innerValue = newValue;
}
},
data() {
return {
innerValue: this.modelValue
};
}
};
</script>
<template>
<div>
<h1>Hi, I'm a component</h1>
<select v-model="innerValue">
<option v-for="option in options" :key="option">
{{ option }}
</option>
</select>
</div>
</template>
[Edit] Using Fallthrough Attribute:
You can use the v-bind="$atrrs":
<script>
export default {
props: {
options: {
type: Array
},
},
};
</script>
<template>
<div>
<h1>Hi, I'm a component</h1>
<select v-bind="$attrs">
<option v-for="option in options" :key="option">
{{ option }}
</option>
</select>
</div>
</template>
Read more: https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes
Related
I have a Custom select component which emits a value in the watch method but when I have to get that value, is not shown in the parent component. (VUE 3)
this is my select component:
<template>
<div class="input-group">
<label class="label">{{ label }}</label>
<select v-model="select">
<option v-for="option in options" :value="option.id" :key="option.id">
{{ option.name }}
</option>
<option :value="select" disabled hidden>Select...</option>
</select>
</div>
</template>
<script lang="ts">
import { ref, watch, getCurrentInstance } from "vue";
export default {
name: "Select",
props: {
options: {
type: Array,
required: true,
},
select: {
type: String,
},
label: {
type: String,
},
},
setup(props) {
const { emit } = getCurrentInstance();
const select = ref(props.value);
watch(select, (value) => {
emit("input", value);
});
return {
select,
};
},
};
</script>
This is the implementation in the parent component
<template>
<Select
label="Group Name"
:options="questions_groups"
v-model="groupName"
/>
<template>
<script>
......
.....
const groupName = ref(null);
<script/>
I need to know why I cannot get the value od the v-model variable in the implementation
for vue3 (because it supports multiple models the event name changed) you need to use update:modelValue
watch(select, (value) => {
emit("update:modelValue", value);
})
for clarity...
modelValue is the default model's name, so
<input v-model="searchText" /> is equivalent to <input v-model:modelValue="searchText" />
having multiple models allows use such as:
<UserName
v-model:first-name="first"
v-model:last-name="last"
/>
more info at https://vuejs.org/guide/components/v-model.html#component-v-model
So I have two components that are imported into my app.vue:
<script>
import Leaderboard from "./components/Comp1.vue";
import Search from "./components/Comp2.vue";
export default {
name: "App",
components: {
Comp1,
Comp2,
},
}
These components are called, when I click on the corresponding button. This all works fine.
But in the components I have some input fields such as in Comp1.vue:
<template>
<div>
<select
class="form-select"
name="event"
id=""
v-model="selectedEvent"
>
<option value="">Please choose an event:</option>
<option v-for="event in eventsList" :key="event">
{{ event }}
</option>
</select>
</div>
</template>
<script>
data: function () {
return {
selectedEvent: "",
</script>
Here I can choose, which event to watch. But after switching to Comp2 and then again choosing Comp1, the selectedEvent is empty. Obviously, because its defined empty in data.
Is there any way to store the selected value in a session variable or would you prefer a different technique?
UI looks like this:
You can maintain an Object in your parent which you can pass as props to a props and then have a two way handshake
<Leaderboard :formInputs="formInputs"></Leaderboard>
<script>
import Leaderboard from "./components/Comp1.vue";
import Search from "./components/Comp2.vue";
export default {
name: "App",
components: {
Comp1,
Comp2,
},
data() {
return {
formInputs: {
compOneInput: '',
compTwpInput: ''
}
},
methods: {
updateData(payload) {
this.formInputs[payload.key] = payload.value;
}
}
and then pass this formInputs to your child Component from where you
you can emit the change whenever you update the input inside that
<template>
<div>
<select
class="form-select"
name="event"
id=""
v-model="selectedEvent"
>
<option value="">Please choose an event:</option>
<option v-for="event in eventsList" :key="event">
{{ event }}
</option>
</select>
</div>
</template>
<script>
export default {
data: function () {
return {
selectedEvent: this.formInputs.compOneInput ? this.formInputs.compOneInput : '',
}
},
watch: {
formInputs(newVal) {
this.selectedEvent = newVal.compOneInput;
},
selectedEvent(newVal, oldVal) {
if(newVal !== oldVal) {
this.$emit('updateData', {key: compOneInput, value: this.selectedEvent});
}
}
}
props: {
formInputs: Object
}
}
</script>
Using the above example for component one , you can implement the same for component two also
you can add a watcher on selectedEvent then store the data in vuex store
I'm trying to create a custom selector that I ill reuse several times and I want to set a prop to the function it has to trigger when a selection is made. Here is my code (only the relevant parts of it):
Main Selector:
<template>
<div>
<select name="selector" >
<option :key="option" v-for="option in options" #change="selection"> {{option}} </option>
</select>
</div>
</template>
<script>
export default {
name: 'CoffeeSelector',
props: {
options: Array,
selection: Function
},
}
</script>
The page where I use it:
<template>
<div>
<custom-selector :options='types' :selection="coucou"> </custom-selector>
</div>
</template>
<script>
import CustomSelector from './CustomSelector.vue'
export default {
name: 'Selectors',
components: {
CustomSelector
},
methods: {
coucou(){
console.log("coucou")
}
}
}
</script>
When I do this, nothing happens when I change the selection. Any ideas on why it happens? Thanks in advance
You can emit events to the parent component.
<template>
<div>
<select name="selector" >
<option :key="option" v-for="option in options" #change="onOptionChange(option)"> {{option}} </option>
</select>
</div>
</template>
<script>
export default {
name: 'CoffeeSelector',
props: {
options: Array
},
methods: {
onOptionChange(option) {
this.$emit('selection', option);
}
}
}
</script>
Then you can listen to those events within the parent component.
<template>
<div>
<custom-selector :options='types' v-on:selection="coucou"> </custom-selector>
</div>
</template>
<script>
import CustomSelector from './CustomSelector.vue'
export default {
name: 'Selectors',
components: {
CustomSelector
},
methods: {
coucou(option){
console.log("coucou: " + option)
}
}
}
</script>
try moving your #change to the select tag instead
<select name="selector" #change="selection">
<option :key="option" v-for="option in options"> {{option}} </option>
</select>
I have made selectbox component and wants to reuse it in other components. Si I want to register that component globally. I have imported that component in main.js but doesnot works.
main.js
import Selectbox from "#/modules/Selectbox.vue";
Vue.component("Selectbox", Selectbox);
Selectbox.vue
<template>
<div>
<label>{{ label }}</label>
<select #change="$emit('input', $event.target.value)">
<option
v-for="opt in options"
:key="opt.value"
:value="opt.value"
:selected="value === opt.value"
>
{{ errorMessage }}
{{ opt.label || "No label" }}
</option>
</select>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true
},
},
data() {
return {
errorMessage: "",
option: "lorem",
options: [
{ label: "lorem", value: "lorem" },
{ label: "ipsum", value: "ipsum" }
]
};
},
};
</script>
Test.vue
<template>
<div>
<Selectbox v-model="ward_no"/>
</div>
</template>
<script>
export default {
data() {
return {
ward_no: '',
};
}
}
</script>
There is nothing wrong in the way that you are trying to register global component but you are missing script tag.
UPDATE: After talking to #prabinasht on skype and reviewing her code, I saw that in multiple files she forgot to remove locally imported/registered component and at the same time the component was registered globally too, so that was the problem.
Register the component this way
Vue.component('Selectbox', require('#/modules/Selectbox.vue').default)
I'm new to Vue.js and trying to build a small application that a user can select a number and view it in another page. The data passed from the parent component was not displayed in the child component like "You select: (a number)", it showed "You select:", without the number passed from the parent. Where did I do wrong? I really can't figure it out.
ParentComponent.vue
<template>
<div>
<p>Select a number:
<select v-model="num">
<option disabled value="">Select</option>
<option v-for="n in 10">{{n}}</option>
<child-component v-bind:select="num"></child-component>
</select>
</p>
</div>
</template>
<script>
import ChildComponent from '../components/ChildComponent'
export default {
name: 'ParentComponent',
components: {
"child-component": ChildComponent
},
data () {
return {
num: 0,
}
}
}
</script>
<style scoped>
</style>
ChildComponent.vue
<template>
<div>
<h2>{{msg}}</h2>
<p>You select: {{select}}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
select: Number
},
data () {
return {
msg: 'ChildComponent'
}
}
}
</script>
<style scoped>
</style>
You can't use <child-component> in the <select></select> tags, please pull out it from the select tag and run it.
<template>
<div>
<p>Select a number:
<select v-model="num">
<option disabled value="">Select</option>
<option v-for="n in 10">{{n}}</option>
</select>
<child-component v-bind:select="num"></child-component> /// run it in here//
</p>
</div>
</template>
<script>
import ChildComponent from '../components/ChildComponent'
export default {
name: 'ParentComponent',
components: {
"child-component": ChildComponent
},
data () {
return {
num: 0,
}
}
}
</script>
<style scoped>
</style>