Как показать или скрыть элемент с помощью флажка, введенного в Vue?

#vuejs2 #bootstrap-vue

Вопрос:

Я пытаюсь сделать что-то вроде этого:

 <b-form-checkbox
  id="currently_working"
  v-model="currentlyWorking"
  value="true"
  unchecked-value="false">
    <span class="fs--1">
      I am currently working here
    </span>
</b-form-checkbox>
</b-form-group>
<p v-if="currentlyWorking">currently working</p>
 

Однако здесь что-то идет не так, потому что тег абзаца не переключается в зависимости от currentWorking состояния.
Вот ссылка на codesandbox : https://codesandbox.io/s/agitated-night-jnhxz?file=/src/components/HelloWorld.vue:43-361

Ответ №1:

Попробуй это. Вам нужно для v-если логические значения true и false, но ваш компонент выдает вам строку true и false. Удачи.

  <b-form-checkbox
        id="currently_working"
        v-model="currentlyWorking"
        :value="true"
        :unchecked-value="false"
        ><span class="fs--1">
          I am currently working here
        </span></b-form-checkbox
      >
 </b-form-group>