Как подставить класс элементу в зависимости от значения во Vue?

Question

[Николай Семенов]

Всем привет!

Ребят, подскажите как сделать подстановку класса в элемент если значение true и убрать если false&

Answer 1

[Evgeny Kulakov]

<div :class="[isNeeded ? 'needed' : false]"></div>

Comments

[Николай Семенов]

у меня вот такой компонент, но тут почему то плохо срабатывает, когда закрываю меню мышкой класс не отменяется, хотя значения в консоле вывожу false, можете подсказать почему?

<template lang="pug">
  v-navigation-drawer(
      right
      :class="rightDrawer ? 'navigation-drawer--close' : false"
      v-model="rightDrawer"
      :permanent="permanent"
      clipped
  )
    div {{ rightDrawer }}
</template>

<script>
import { eventBus } from '@/main'

export default {
  data () {
    return {
      rightDrawer: true,
      permanent: true
    }
  },
  watch: {
    rightDrawer: function (val) {
      console.log(this.rightDrawer, val)
      eventBus.$emit('SearchSwitch', val)
    }
  },
  created () {
    eventBus.$on('SearchSwitch', (drawer) => {
      this.rightDrawer = drawer
    })
  }
}
</script>

<style lang="stylus">
</style>

[Evgeny Kulakov]

Николай Семенов: Из примера не ясно что rightDrawer устанавливает в false

[Николай Семенов]

Evgeny Kulakov: ну да((( но по другому никак не показать же, хотя я в консоле вотчером слежу меняется. это компонент из vuetify пытаюсь костылями закрыть режим permanent он всегда у них открыт

[Evgeny Kulakov]

watch: {
    rightDrawer: function (val) {
      console.log(this.rightDrawer, val)
      eventBus.$emit('SearchSwitch', val)
    }
  },
  created () {
    eventBus.$on('SearchSwitch', (drawer) => {
      this.rightDrawer = drawer
    })
  }

Вот это как-то странно выглядит, вы следите за изменением rightDrawer, при его изменении отправляете событие, тут же его ловите и опять присваиваете той же переменной...

[Николай Семенов]

Evgeny Kulakov: да, наверное не правильно я сделал что назвал события одинаково, поменяю потом напишу из-за этого ли.
а если есть вот такой див

div(class="field-item" v-if="data.label === 'Я ищу'")
              input(type="radio" id="woman" v-model="data.value")
              label(for="woman" class="label" :class="[data.value === 'Девушку' ? 'active' : false]") Девушку

есть три радиобатона и нужно окрасить тот, в зависимости какое значение у юзера
вот такая запись не срабатывает. неправильно написал?

[Evgeny Kulakov]

Николай Семенов: В таких случаях я бы открыл dev tools и посмотрел как меняются значения у компонента, что сидит в data.value.
Присвоение класса вроде должно работать, если все остальное верное.

[Николай Семенов]

да, все правильно. это его чего то с классами напутал
а можете подсказать почему вот это возвращает boolean а не значение при клике?

div(class="field-item")
              input(type="checkbox" id="search-friends" value="поиск друзей" v-model="data.value[0]")
              label(for="search-friends" class="label" :class="[data.value[0] === 'поиск друзей' ? 'cheked' : false]")

я так понимаю чек или не чек

[Evgeny Kulakov]

Ну он не понимает скорее всего что вам возвращать, когда у вас чек или не чек, по умолчанию true|false возвращает, из доки:

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

[Николай Семенов]

Evgeny Kulakov: ну да, все правильно. так теперь работает.
проблема в том, что если начинаю выводить циклом, то true-value, id и for не рендерятся как хотелось бы...подставляется обычная строка. можете подсказать в чем проблема?

div(class="field-item" v-for="item in goalsdating")
              input(type="checkbox" id="item.id" true-value="item.title" false-value="" v-model="data.value[0]")
              label(for="item.id" class="label" :class="[data.value[0] === 'item.title' ? 'cheked' : false]") {{ item.title }}

[Evgeny Kulakov]

Связывание добавьте:

input(type="checkbox" :id="item.id" :true-value="item.title" :false-value="" v-model="data.value[0]")

[Николай Семенов]

Evgeny Kulakov: спасибо, увлекся я что-то и не заметил.
Сменил названия событий, проблема не ушла
этот компонент выдвигающегося меню(в моем случае поиск) он может кликом выдвигаться и задвигаться, а может и мышкой

<template lang="pug">
  v-navigation-drawer(
      v-if="$route.path.indexOf('search') + 1"
      right
      v-model="drawerRight"
      :permanent="permanent"
      clipped
      :class="rightDrawer ? 'navigation-drawer--close' : false"
  )
    div {{ drawerRight }}
</template>

<script>
import { eventBus } from '@/main'

export default {
  data () {
    return {
      drawerRight: false,
      permanent: true
    }
  },
  watch: {
    drawerRight: function (val) {
      console.log(this.drawerRight)
      eventBus.$emit('SearchSwitch-1', val)
    }
  },
  created () {
    eventBus.$on('SearchSwitch', (drawer) => {
      console.log(drawer)
      this.drawerRight = drawer
    })
  }
}

вот эти компонентом я переключаю сотояние

<template lang="pug">
  v-toolbar(fixed class="toolbar")
    v-toolbar-side-icon(@click.stop="openDrower")
    v-toolbar-title
    v-spacer
    v-btn(icon v-if="$route.path.indexOf('search') + 1" @click.stop="openSearch")
      span.icon-settings
</template>

<script>
import { eventBus } from '@/main'

export default {
  data () {
    return {
      drawerRight: false
    }
  },
  methods: {
    openDrower () {
      eventBus.$emit('DrowerSwitch', this.drawer = !this.drawer)
    },
    navigateToEditProfile () {
      this.$router.push({name: 'MyProfileEdit'})
    },
    showAction () {
      alert('Hi!')
    },
    openSearch () {
      eventBus.$emit('SearchSwitch', this.drawerRight = !this.drawerRight)
    }
  },
  created () {
    eventBus.$on('DrowerSwitch', (val) => {
      this.drawer = val
    })
    eventBus.$on('SearchSwitch-1', (val) => {
      this.rightDrawer = val
    })
  }
}
</script>

этот компонент не работает корректно потому я решил сам удалять классы :class="rightDrawer ? 'navigation-drawer--close' : false" а если !rightDrawer нужно удалить navigation-drawer--open

Answer 2

[Павел Корнилов]

var val = true;
elem.className= val? 'class': '';