es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • En Vue 2, ¿cómo tener solo el primer checkbox de tipo “input” seleccionado en un bucle “v-for”?

En Vue 2, ¿cómo tener solo el primer checkbox de tipo “input” seleccionado en un bucle “v-for”?

28 Jul, 2023 Programación

Gracias por echar un vistazo, estoy un poco atascado. Tratando de averiguar cómo hacer que el primer cuadro de verificación se muestre marcado de manera predeterminada.

Aquí está mi JS, las categorías se generan dinámicamente.

Vue.component('category-filter', {
  template: '#category-filter-template',
  props: {
    appMounted: false,
  },
  data() {
    return {
      categories: {},
      checkedState: false,
    };
  },
  methods: {
    handleCheckboxClicked(e) {
      console.log({ e });
    },
  },
  mounted() {
    this.appMounted = true;
    this.categories = jsContext.categories;
  },
});

Aquí está mi plantilla. He optado por aplicar los estilos en línea para hacer que el componente sea más reutilizable.

<div class="filter-container--wrapper" style="
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2rem;
    color: #fff;
    background-color: #5676a7;
    border-radius: 5px;
  ">
  <div id="filter-item" style="padding: 15px" v-for="category in categories" :key="category.id">
    <input id="category-name" type="checkbox" @click="handleCheckboxClicked($event)" :value="category.id" :checked="checkedState">
    <label for="category-name">
      <span>{{category.name}}</span>
    </label>
  </div>
</div>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el primer checkbox se muestre marcado por defecto, puedes actualizar la propiedad de datos checkedState en el hook mounted para que sea true solo para el primer elemento del array categories.

    Aquí tienes el código actualizado:

    Vue.component('category-filter', {
  template: '#category-filter-template',
  props: {
    appMounted: false,
  },
  data() {
    return {
      categories: {},
      checkedState: {},
    };
  },
  methods: {
    handleCheckboxClicked(e) {
      console.log({ e });
    },
  },
  mounted() {
    this.appMounted = true;
    this.categories = jsContext.categories;

    // establecer el estado marcado para el primer elemento en categories como true
    if (this.categories.length > 0) {
      this.checkedState[this.categories[0].id] = true;
    }
  },
});

    Y actualiza el enlace :checked en el template para que utilice el objeto checkedState:

    <input id="category-name" type="checkbox" @click="handleCheckboxClicked($event)" :value="category.id" :checked="checkedState[category.id]">

    Esto asegurará que solo el primer checkbox esté marcado por defecto y los demás permanezcan sin marcar hasta que se haga clic en ellos.

Comments are closed.