Привязать условный класс и класс var - VueJS - PullRequest
Новая
       3

Привязать условный класс и класс var - VueJS

1 голос
/ 20 июня 2019

Учитывая реквизиты: 

someBool = true;
someString = 'set-class'

Это добавит conditional-class как класс к элементу, когда someBool истинно: 

v-bind:class="{'conditional-class': someBool}"

Это добавит set-classк элементу как классу: 

v-bind:class="someString"

Как мне смешать эти два синтаксиса?

Попытка: 

v-bind:class="{'conditional-class': someBool}" v-bind:class="someString"

Результат: Vue не поддерживает дублирующиеся привязки

Попытка: 

v-bind:class="[someString, {'conditional-class': someBool}]"

Результат: только добавляет «условный класс».Даже когда заказ полностью изменен.

Попытка: 

v-bind:class="{'conditional-class': someBool, someString: true}"

Результат: обрабатывает имя someString как строку, класс становится conditional-class someString

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Вы можете использовать магию ES2015 для создания имени вычисляемого свойства: 

:class="{'conditional-class': someBool, [someString]: true}"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

В качестве альтернативы, одна из вещей, которые вы уже попробовали, должна работать: 

:class="[someString, {'conditional-class': someBool}]"

Это явно задокументировано здесь:

https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

Я пробовал более старые версии Vue, но, похоже, они долгое время поддерживались.

Обе техники демонстрируются здесь: 

new Vue({
  el: '#app',

  data () {
    return {
      someBool: true,
      someString: 'class2'
    };
  }
});
.class1 {
  border: 1px solid red;
  padding: 5px;
}

.class1::before {
  content: 'I have class1';
}

.class2 {
  background: #eef;
  margin: 5px;
}

.class2::after {
  content: ' & class2';
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <div :class="{class1: someBool, [someString]: true}"></div>
  <div :class="[someString, {class1: someBool}]"></div>
</div>
0 голосов
/ 20 июня 2019

Краткий ответ

Используйте вычисленное: 

v-bind:class="someComputed"

computed:{
    someComputed: function(){
        return (this.someBool ? "conditional-class" + " " : "") 
            + this.someString;
    }
}

Но это действительно обходной путь, если кто-то еще приходит, почесывая голову. OP ищет смесь внутри привязки или определенное «не может быть сделано» от человека, обладающего способностью быть окончательным.

...