Блог

У меня есть этот флажок

 <div class="form-check form-check-inline col-lg-2">
  <input v-model="propertyData.fitness_centre" type="checkbox" class="form-check-input" id="dc_li_u" />
  <label class="form-check-label" for="dc_li_u">Fitness Centre</label>
</div>
 

и я сохраняю состояние в базе данных, поэтому при редактировании состояние восстанавливается и отображается, был ли установлен флажок или нет.

Однако мне нужно, чтобы флажок имел строковое значение, которое сохраняется в базе данных при нажатии на флажок, чтобы, когда флажок имеет строковое значение, он был установлен, а когда строковое значение пустое, флажок не установлен.

У меня много флажков, и поэтому я хотел, чтобы вся логика содержалась внутри флажка. Как я могу изменить флажок, чтобы сделать это?

Вы можете использовать true-value и false-value атрибуты, чтобы присваивать определенные значения при проверке/снятии флажка.

 new Vue({
  el: "#app",
  data: {
      fitness_centre: "true value"
  }
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="form-check form-check-inline col-lg-2">
    <input v-model="fitness_centre" true-value="true value" false-value="" type="checkbox" class="form-check-input" id="dc_li_u" />
    <label class="form-check-label" for="dc_li_u">Fitness Centre</label>
    <div>Value: {{ fitness_centre }}</div>
  </div>
</div> 

Вы можете использовать обработчик change событий-для установки propertyData.fitness_centre желаемого значения на основе проверенного состояния. Также привязать <input>.checked к propertyData.fitness_centre так , чтобы проверенное состояние было привязано к истинности модели (в противном случае пустая строка false true ).

 <template>
  <input type="checkbox"
         @change="onChange"
         :checked="propertyData.fitness_centre"
         value="fitness_centre">
</template>

<script>
export default {
  data() {
    return {
      propertyData: { fitness_centre: '' }
    }
  },
  methods: {
    onChange(e) {
      this.propertyData.fitness_centre = e.target.checked ? e.target.value : ''
    }
  }
}
</script>
 

ДЕМОНСТРАЦИЯ