shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.66k stars 991 forks source link

v-model is not worked when upgrade vue 3 with @vue/compat #1687

Closed Nationalcat closed 1 year ago

Nationalcat commented 1 year ago

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

// vite.config.js
export default {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2
          }
        }
      }
    })
  ]
}

Expected behaviour

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>

Actual behaviour

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>
mattelen commented 1 year ago

Fixed and launched on v3.0.0-beta.2