[SOLVED] How to get selected value of radio as string?

Questions
1

I have a group of radio button, I want to get string but I get number

f7-list(formLanguage='')
  f7-list-item(:key='1', radio='', name='language', :checked="language === '1'", @change="language = $event.target.value", :value='1', :title="'English'")
  f7-list-item(:key='2', radio='', name='language', :checked="language === '2'", @change="language = $event.target.value", :value='2', :title="'Deutch'")
  f7-list-item(:key='3', radio='', name='language', :checked="language === '3'", @change="language = $event.target.value", :value='3', :title="'Espanol'")

  data: function() {
    return {
      language: 'english'
    }
  },

this code logs 1 or 2 or 3
```javascript
    saveLanguageSetting:function() {
      console.log('selected language ' + this.language)

I tried few things like this, changed value to es but this time get -> on
Or I tried to change all of them, changed, key, checked and value to es. again not worked

  f7-list-item(:key='3', radio='', name='language', :checked="language === '3'", @change="language = $event.target.value", :value='es', :title="'Espanol'")
2

You get number, because you have number in value attribute

3

As showed in code at bottom, I also tried value as string but get “on” instead of the string I wrote, I tried every combination, can you write me exact line that will work ?

4

I will suggest you not to use value at all here, because Vue bindings allow to avoid it:

<f7-list-item
  radio
  :checked="language === 'english'"
  @change="language = 'english'"
  title="English"
></f7-list-item>

<f7-list-item
  radio
  :checked="language === 'deutch'"
  @change="language = 'deutch'"
  title="Deutch"
></f7-list-item>
...
1 Like
5

Hmm. actually I noticed that example in f7 vue docs does have value but not have key, and I took code from f7 template, maybe the key is unnecessary, can you tell me where I can use key ? do I need it ?

6
1 Like