Директивы v-bind требуют значения атрибута - с данными Dynami c

Question

Я пытаюсь создать некоторые динамические c классы, например, так:

<div :class="{ 'chunk-' + chunk.length : true, 'is-mobile' : isGridView }" class="columns">

Но я получаю ошибку:

'v-bind' directives require an attribute value.

Если я делаю это так, я не не получаю ошибку:

<div :class="{ 'chunk-' : true, 'is-mobile' : isGridView }" class="columns">

Но мне нужно значение chunk.length.

Есть идеи?

Answer 1

Вы можете решить эту проблему, добавив динамический c класс, например:

<div :class="{ ['chunk-' + chunk.length] : true, ['is-mobile'] : isGridView }">

Демо:

new Vue({
  el: "#myApp",
  data: {
    chunk: [1, 2],
    isGridView: true
  },
  methods: {
  }
})

.chunk-2 {
  background-color:skyblue;padding: 20px; margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
  <div :class="{ ['chunk-' + chunk.length] : true, 'is-mobile' : isGridView }" class="columns">
    Dynamic Classes in Vue
  </div>
</div>

Answer 2

Вы можете сделать наоборот, используя троичные операторы для добавления классов к вашему элементу как

<div :class="[true ? 'chunk-' + chunk.length :'', isGridView ? 'is-mobile' : '']">

Хотя это еще несколько символов, вы определенно будете держаться подальше от непредсказуемого поведения компилятора.