Флажок Bootstrap Vue: как установить / снять флажок при нажатии на другой элемент

Я прочитал документы, но не могу найти ни одного примера флажок bootstrap vue устанавливается на отметку / снятие отметки при щелчке строки таблицы (когда она находится под таблицей). Есть ли способ, при котором щелчок по строке приведет к тому, что она будет отмечена / снята?

data() {
  return {
    form: {
      optional: {} as { [index: string]: boolean },
    }, 
  };
},
methods: {
  triggerCheckBox(relatedId: string) {
    const val = this.form.optional[relatedId];
    this.form.optional[relatedId] = !val;
  },
}

<tr v-for="related in liability.related" @click="triggerCheckBox(related.id)">
  <td>
    <b-form-checkbox
      v-model="form.optional[related.id]"
    </b-form-checkbox>
  </td>

Изменить: я уже манипулировал привязкой v-модели к флажку. По-прежнему не работает.


javascript vue.js bootstrap-vue
person The Bassman    schedule 16.10.2018    source источник
comment
Обычно вы просто переключаете значение, к которому привязан флажок (его v-model). Как выглядит ваш код?   -  person Phil    schedule 16.10.2018
comment
Отредактировано. Я просто не публиковал код, потому что предполагал, что это стандартное поведение флажка в bootstrap vue, где изменения в модели не являются двухсторонней привязкой, что было подтверждено в моем коде. Я также заметил, что установка значений по умолчанию на true не устанавливает флажок на checked.   -  person The Bassman    schedule 16.10.2018
comment
Добавление новых свойств к вашим объектам, определенным в data() (т.е. this.form.optional[relatedId] = !val), не является реактивным. См. vuejs.org/v2/guide/reactivity.html#Change-Detection -Предупреждения   -  person Phil    schedule 16.10.2018

Ответы (2)


arrow_upward
2
arrow_downward

Я добавил это в свой код в свой созданный хук:

this.$set(this.form.optional, related.id, false));

чтобы установить form.optional в реактивное состояние ..

person The Bassman    schedule 16.10.2018

arrow_upward
0
arrow_downward

просто убедитесь, что вы поставили опору

value=true unchecked-value=false
v-model="varaible_of_your"
***"variable_of_your=true or false"
person Chinhfong Hang    schedule 25.09.2020