Closed Nationalcat closed 1 year ago
https://codesandbox.io/p/github/Nationalcat/vue-multiselect-problem/main?workspace=%257B%2522activeFilepath%2522%253A%2522%252Fsrc%252Fcomponents%252FTheWelcome.vue%2522%252C%2522openFiles%2522%253A%255B%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clgboccnv000x3b6igbam7bra%2522%253A%257B%2522key%2522%253A%2522clgboccnv000x3b6igbam7bra%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522clgbocf1x005q3b6iwkrlinn5%2522%252C%2522isMinimized%2522%253Afalse%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clgbocejz00353b6isghinjyr%2522%252C%2522isMinimized%2522%253Atrue%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clgboccnv000x3b6igbam7bra%2522%252C%2522spacesOrder%2522%253A%255B%2522clgboccnv000x3b6igbam7bra%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D
// vite.config.js export default { resolve: { alias: { vue: '@vue/compat' } }, plugins: [ vue({ template: { compilerOptions: { compatConfig: { MODE: 2 } } } }) ] }
can worked
<template> <div> <label class="typo__label">Single select / dropdown</label> <multiselect :model-value="value" @update:model-value="value = $event" deselect-label="Can't remove this value" track-by="name" label="name" placeholder="Select one" :options="options" :searchable="false" :allow-empty="false" > <template #singleLabel="{ option }"> <strong>{{ option.name }}</strong> is written in <strong> {{ option.language }}</strong> </template> </multiselect> <pre class="language-json"><code>{{ value }}</code></pre> </div> </template> <script> export default { data() { return { value: null, options: [ { name: "Vue.js", language: "JavaScript" }, { name: "Rails", language: "Ruby" }, { name: "Sinatra", language: "Ruby" }, { name: "Laravel", language: "PHP", $isDisabled: true }, { name: "Phoenix", language: "Elixir" }, ], } } }; </script>
can not worked
<template> <div> <h3>can not update value</h3> <label class="typo__label">Single select / dropdown</label> <multiselect v-model="value" deselect-label="Can't remove this value" track-by="name" label="name" placeholder="Select one" :options="options" :searchable="false" :allow-empty="false" > <template #singleLabel="{ option }"> <strong>{{ option.name }}</strong> is written in <strong> {{ option.language }}</strong> </template> </multiselect> <pre class="language-json"><code>{{ value }}</code></pre> </div> </template> <script> export default { data() { return { value: null, options: [ { name: "Vue.js", language: "JavaScript" }, { name: "Rails", language: "Ruby" }, { name: "Sinatra", language: "Ruby" }, { name: "Laravel", language: "PHP", $isDisabled: true }, { name: "Phoenix", language: "Elixir" }, ], } } }; </script>
Fixed and launched on v3.0.0-beta.2
Reproduction Link
https://codesandbox.io/p/github/Nationalcat/vue-multiselect-problem/main?workspace=%257B%2522activeFilepath%2522%253A%2522%252Fsrc%252Fcomponents%252FTheWelcome.vue%2522%252C%2522openFiles%2522%253A%255B%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clgboccnv000x3b6igbam7bra%2522%253A%257B%2522key%2522%253A%2522clgboccnv000x3b6igbam7bra%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522clgbocf1x005q3b6iwkrlinn5%2522%252C%2522isMinimized%2522%253Afalse%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clgbocejz00353b6isghinjyr%2522%252C%2522isMinimized%2522%253Atrue%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clgboccnv000x3b6igbam7bra%2522%252C%2522spacesOrder%2522%253A%255B%2522clgboccnv000x3b6igbam7bra%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D
Steps to reproduce
Expected behaviour
can worked
Actual behaviour
can not worked