I have made a child component – Dropdown based on Devextreme DxSelectBox.
I set in parent component v-model as attribute and forward to it an variable as ref, which is set to initial selected valueconst item = ref({ value: "option 1", })
, but the DxSelectBox is empty when loading the project.
Child component – Dropdown is emitting the right selected option, but unfortunately the initial selected value is not set.
Code for Parent App.vue component is:
<template>
<Dropdown :items="items" v-model:option="item" />
<div class="emitting">Emitting: {{ item }}</div>
</template>
<script>
import { ref } from "vue";
import Dropdown from "./components/Dropdown.vue";
export default {
name: "App",
components: {
Dropdown: Dropdown,
},
setup(props, context) {
const emitValue = (e) => {
context.emit("update:option", e.value);
};
const items = ref([
{
value: "option 1",
},
{
value: "option 2",
},
{
value: "option 3",
},
]);
const item = ref({
value: "option 1",
});
return {
items,
item,
emitValue,
};
},
};
</script>
<style>
@import "https://cdn3.devexpress.com/jslib/18.2.8/css/dx.light.css";
@import "https://cdn3.devexpress.com/jslib/18.2.8/css/dx.common.css";
</style>
and code for Dorpdown.vue component is:
<template>
<div class="dx-field">
<DxSelectBox
:data-source="items"
:value="option"
@valueChanged="emitValue"
:width="width"
:height="height"
:drop-down-options="{ width: width }"
display-expr="value"
:disabled="disabled"
:read-only="readOnly"
:hint="hint"
:placeholder="placeholder"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, watch, ref } from "vue";
import DxSelectBox from "devextreme-vue/select-box";
export default defineComponent({
name: "DpmDropdown",
components: {
DxSelectBox,
},
emits: ["update:option"],
props: {
label: { type: String, default: "" },
showLabel: { type: Boolean, default: true },
headingTooltip: { type: String, default: "" },
items: { type: Array, default: () => [] },
option: { type: Object, default: () => ({}) },
width: { type: [Number, String], default: "100%" },
height: { type: String, default: "40px" },
icon: { type: String, default: "" },
hint: { type: String, default: "" },
disabled: { type: Boolean, default: false },
readOnly: { type: Boolean, default: false },
placeholder: { type: String, default: "" },
},
setup(props, context) {
const emitValue = (e: any) => {
context.emit("update:option", e.value);
};
return {
emitValue,
};
},
});
</script>
The link for sandbox project is here:
enter link description here
Can somebody help?