[SOLVED] How to get selected value of radio button group?

Questions
1

I have a radio button group in a f7-list as below and I want to get selected radio information

f7-list(formLanguage='')
f7-list-item(:key='1', radio='', name='my-radio', :checked='1 === 1', :value='1', :title="'English'")
f7-list-item(:key='2', radio='', name='my-radio', :checked='2 === 1', :value='2', :title="'French'")

and I tr’ed to get selected value as th’s

    saveLanguageSetting:function() {
  let selectedValue = formLanguage.value

    },

or should I use something like this ?If so what should I wr’te as id ?

let myValue = document.getElementById(??).checked

2

Document lists 's Checkboxes & Radios specific properties, how can I access them ? when I debug on this.$7, I dont see radio or f7-list-view under this.$7, then what should I do ?

I tried this but no help

var isChecked = this.$f7.find('input[name=my-radio2]').prop('checked');

or this dont work

var isChecked = this.$f7.input.my-radio2.checked

some older post provide a solution like this but I dont know how to do it with vue and f7 vue

$$('input[type="radio"]').on('change click', function(ev){
   console.log($$(ev.currentTarget).val());
})
3

This are not doing like that in Vue-world. This is the more correct way:

<template>
  <!-- ... -->
    <f7-list-item
      radio
      :checked="language === 'en'"
      :title="'English'"
      @change="(e) => { if (e.target.checked) language = 'en' }"
    ></f7-list-item>
    <f7-list-item
      radio
      :checked="language === 'fr'"
      :title="'English'"
      @change="(e) => { if (e.target.checked) language = 'fr' }"
    ></f7-list-item>
  <!-- ... -->
</template>
<script>
export default {
  data() {
    return {
      ...
      language: 'en',
    };
  },
  ...
}
</script>
1 Like
4

Thanks, I noticed that in docs lately

Meanwhile I found something strange in f7 vue docs for radio

first it starts with <f7-list-item radio

but then suddenly switches to <f7-radio, what is the point of it ? We can use both of them and no difference ?

5

whats the difference between these two ?

f7-list-item radio

<f7-radio
6

http://framework7.io/vue/radio.html

7

Actually I was asking something on that page, I wonder whether there is any difference between two usage

8

But you can see it in example. First one is lost item with radio button to be used in lists. Second one just creates separate radio element

1 Like