Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Nationalcat opened this issue Apr 11, 2023 · 1 comment
Closed

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

Nationalcat opened this issue Apr 11, 2023 · 1 comment
Assignees

Comments

@Nationalcat
Copy link

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
Copy link
Collaborator

mattelen commented May 9, 2023

Fixed and launched on v3.0.0-beta.2

@mattelen mattelen closed this as completed May 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

When branches are created from issues, their pull requests are automatically linked.

2 participants