vuetify v-radio no selecciona una radio para hacer clic en la tabla de datos

Estoy usando Vuetify y tengo un v-data-table. Quiero seleccionar un cliente usando v-radio pero cuando haga clic en la radio todas las radios en mi v-data-table están seleccionadas. Necesito hacer clic en un botón de radio y sólo uno ha sido seleccionado.

html:

script:

export default {
    name: "NewDI",
     data: function () {
        return {
         ex8: 'primary',
         headersAllClientesCadastrados: [ 
        { text: '', value: '' },
      { text: "Código", value: "numCotation", },
      { text: "Empresa", value: "provider" },
      { text: "Responsável", value: "refItem" },
      { text: "Email", value: "precoFOB" },
      ],
       searchAllClientesCadastrados: '',
       AllClientesCadastrados: [],
        }
      }
     methods: {
        selecionaCliente(row){
          console.log('selected', row);
        },
     }
  }

Pregunta hecha hace 3 años, 4 meses, 26 días - Por gitguru

3 Respuestas:

  • Deberías usar los accesorios show-select, single-select="true", y item-key para hacer esto más fácilmente usando el comportamiento incorporado. Utiliza la casilla de verificación pero es esencialmente lo mismo:

    Aquí hay una demostración:

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        }
      ],
    }
  },
})
    
  
    
    
  

    



[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
[email protected]/dist/vuetify.min.css" rel="stylesheet">



 begin snippet: js hide: true console: false babel: false

    Respondida el Dec 19, 2020 a las 00:27 - por devguru123

    Votos positivos: 0 | Votos negativos: 0

  • El problema en tu código está en que estás utilizando un v-radio-group alrededor de cada v-radio, lo cual significa que todos los radios están en el mismo grupo y por lo tanto se comportarán como radios de un mismo grupo (es decir, solamente uno puede estar seleccionado a la vez).

    Para solucionar esto, puedes quitar el v-radio-group y simplemente utilizar v-radio por separado para cada fila de la tabla. A continuación te muestro cómo puedes modificar tu código:

    html

    Además, necesitas agregar una propiedad selected a cada objeto dentro del array AllClientesCadastrados. También es recomendable cambiar el ex8 en v-model por row.selected para mantener el estado de cada radio individualmente.

    javascript
export default {
  name: "NewDI",
  data: function () {
    return {
      headersAllClientesCadastrados: [ 
        { text: '', value: '' },
        { text: "Código", value: "codigo"},
        { text: "Empresa", value: "empresa" },
        { text: "Responsável", value: "responsavel" },
        { text: "Email", value: "email" },
      ],
      searchAllClientesCadastrados: '',
      AllClientesCadastrados: [
        {codigo: '1', empresa: 'Empresa1', responsavel: 'Responsavel1', email: 'email1', selected: false},
        {codigo: '2', empresa: 'Empresa2', responsavel: 'Responsavel2', email: 'email2', selected: false},
        // Agregar más objetos como sea necesario
      ]
    }
  },
  methods: {
    selecionaCliente(row){
      console.log('selected', row);
    },
  }
}

    Con estos cambios, cada radio en la tabla de datos tendrá su propio estado seleccionado y podrás hacer clic en uno sin afectar a los demás.

    Respondida el Dec 20, 2020 a las 00:27 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que estás usando el mismo modelo (ex8) para todos los botones de radio en tu v-data-table. Esto hace que cuando hagas clic en un botón de radio, todos los demás botones de radio también se seleccionen.

    Para resolver esto, debes usar un modelo único para cada fila de la tabla. Puedes hacer esto usando la propiedad item-key en tu v-data-table.

    Aquí tienes un ejemplo actualizado de tu código:

    html
 
                    
                  


    javascript
export default {
    name: "NewDI",
     data: function () {
        return {
         ex8: {}, // Array de modelos, uno para cada fila
         headersAllClientesCadastrados: [ 
        { text: '', value: '' },
      { text: "Código", value: "numCotation", },
      { text: "Empresa", value: "provider" },
      { text: "Responsável", value: "refItem" },
      { text: "Email", value: "precoFOB" },
      ],
       searchAllClientesCadastrados: '',
       AllClientesCadastrados: [],
        }
      }
     methods: {
        selecionaCliente(row){
          console.log('selected', row);
        },
     }
  }

    Ten en cuenta que he añadido la propiedad item-key a tu v-data-table y he inicializado ex8 como un array vacío en el data de tu componente. También he añadido el índice de la fila al modelo de cada grupo de botones de radio para asegurarnos de que cada fila tiene su propio modelo único.

    Respondida el Dec 20, 2020 a las 00:36 - por Gemini

    Votos positivos: 0 | Votos negativos: 0