Skip to content
This repository has been archived by the owner on Oct 5, 2019. It is now read-only.

v-model does not update switch #60

Closed
scriptPilot opened this issue Jan 22, 2017 · 3 comments
Closed

v-model does not update switch #60

scriptPilot opened this issue Jan 22, 2017 · 3 comments

Comments

@scriptPilot
Copy link
Contributor

scriptPilot commented Jan 22, 2017

Similar to the input issue, v-model does not update the view after value change.

<f7-list-item>
  <f7-label>Switch</f7-label>
  <f7-input v-model="switchbox" name="switchbox" type="switch"></f7-input>
</f7-list-item>
module.exports = {
  data: function () {
    return {
      switchbox: ''
    }
  },
  mounted: function () {
    setTimeout(function() {
      this.switchbox = 'yes'
    }.bind(this), 3000)
  }
}

['yes'], 1 or true results in error, only string and number are allowed

@scriptPilot
Copy link
Contributor Author

Here full page code to test ...

<template>
  <f7-page>
    <f7-list>
      <f7-list-item>
        <f7-label>Name</f7-label>
        <f7-input v-model="name" name="name" type="text" placeholder="Name"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>Gender</f7-label>
        <f7-input v-model="gender" name="gender" type="select">
          <option value="male" :selected="gender==='male'">Male</option>
          <option value="female" :selected="gender==='female'">Female</option>
        </f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>Switch</f7-label>
        <f7-input v-model="switchbox" name="switchbox" type="switch"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>Range</f7-label>
        <f7-input v-model="range" name="range" type="range" min="0" max="100" step="1">
        </f7-input>
      </f7-list-item>
    </f7-list>
    <f7-block inner>
      {{json}}
    </f7-block>
  </f7-page>
</template>
<script>
  module.exports = {
    data: function () {
      return {
        name: 'Vladimir',
        gender: 'male',
        switchbox: 'yes',
        range: 50
      }      
    },
    computed: {
      json: function () {
        return JSON.stringify([
          this.name,
          this.gender,
          this.switchbox,
          this.range
        ])
      }
    }
  }
</script>

@nolimits4web
Copy link
Member

As it behaves like a checkbox it should accept boolean value true or false. Its support was added in this commit f4fbd14

@scriptPilot
Copy link
Contributor Author

Works well, thank you Vladimir

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants