Weird Behaviour of v-model with select #183

HassiumAGT · 2022-09-04T14:43:28Z

HassiumAGT
Sep 4, 2022

<head>
  <script src="https://unpkg.com/petite-vue"></script>
</head>
<div id="app">
  <div id="a" v-if="page==1">
    <select v-model="statetoshare">
      <option value="true">true</option>
      <option value="false">false</option>
    </select>
    <button @click="page=2">next</button>
  </div>
  <div id="b" v-else-if="page==2">
    {{ statetoshare }}
    <p v-if="statetoshare">selected checkbox</p>
    <p v-else>unselected checkbox</p>
    <button @click="page=1">back</button>
  </div>
</div>
<script>
  PetiteVue.createApp({
    page: 1,
    statetoshare: true,
  }).mount(app);
</script>

I made this to replicate the error I am facing,
When I select the option and go to the next page, the v-if condition does not change but the state variable does.
sorry if duplicate, need a fix..

abiacarl · 2022-09-05T06:40:08Z

abiacarl
Sep 5, 2022

option should be boolean:

option :value="true">true</option
option :value="false">false</option

In your example, on change event, the value of "statetoshare" changed to string.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Weird Behaviour of v-model with select #183

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Weird Behaviour of v-model with select #183

HassiumAGT Sep 4, 2022

Replies: 1 comment

abiacarl Sep 5, 2022

HassiumAGT
Sep 4, 2022

abiacarl
Sep 5, 2022