How to iterate an object retrieved by Fetch API in VueJS?

Question

I have a data Object resulting by Fetch:

   data () {
      return {
        show: true,
        interval: {},
        dadosCliente: {},
        radio: ''
      }

 fetchNome() {
          fetch('http://localhost:3000/pessoas/'+this.$store.state.cpf)
             .then(response => response.json())
             .then(data => {
                this.dadosCliente = data             
                this.show = false;
             });
      } 

Output dadosCliente:

[{'nome':'Paulo'},{'nome':'Marcos'},{'nome':'Victor'}]

When I try to iterate v-for in v-radio (vuetify) I receive message saying which item is not declared.

<v-radio-group v-model="radio" mandatory> 
      <v-radio :v-for="item in dadosCliente" :key="item.nome" :label="`${item.nome}`"></v-radio>
</v-radio-group>

Speding a time reading some articles, posts, but I couldnt finish it. Anyone can help me ?

Answer 1

You shouldn't use binding sign : with directives like v-if or v-for it should be like:

v-for="item in dadosCliente"