CODEWITHSUNDEEP
vue.jshtml-framework-7
rashidnk
rashidnk

Reputation: 4292

vuejs Model for radio list item

How to set a v-model for a framework7-vue radio list item element?

Checkboxes & Radios Vue Component

  <f7-list-item 
    radio 
    name="my-radio" 
    v-model="method.val" 
    value="ISNA" 
    title="Islamic Society of North America" 
    subtitle="ISNA" 
    text="North America (US and Canada)">
  </f7-list-item>

the above code does not work.

Upvotes: 2

Views: 1009

Answers (2)

Mike Davlantes
Mike Davlantes

Reputation: 1034

@mix3d's answer works well for radio buttons, but since the docs are lacking on this topic I'm going to be explicit and add this example as well. For a checkbox list-item, set input-value to your favorite boolean as a string and use v-model to bind it to a corresponding javascript boolean in your data:

<template>
    <f7-list form>
        <f7-list-item checkbox name="friends" input-value="true" title="Friends" v-model="settings.friends"></f7-list-item>
    </f7-list>
</template>

<script>
    export default {
        data() {
            return {
                settings: {
                    friends: true
                }
            }
        }
    }
</script>

Upvotes: 2

mix3d
mix3d

Reputation: 4333

The problem is an issue of undocumented features, as per this github exchange

You can fix it by adding an input-value attribute to the f7-list-item, as follows:

<f7-list-item 
  radio 
  name="my-radio" 
  v-model="method.val" 
  value="ISNA"
  input-value="ISNA"
  title="Islamic Society of North America" 
  subtitle="ISNA" 
  text="North America (US and Canada)">
</f7-list-item>

Remember, however, these caveats:

input-value can not be empty string. From list-item.vue, valueComputed fallbacks to this.value if this.inputValue is empty.

However, that fallback appears to not be working, since, like you said (and I experienced as well), it doesn't update the v-model if no input-value is added. So TLDR; make sure input-value isn't an empty string, or things will break.

Upvotes: 2

Related Questions