Смешайте динамический класс с связывателями данных в Vue.js

Question

Итак, у меня есть следующий v-for в HTML:

<ul v-for="(item, index) in openweathermap.list">
    <li>{{item.dt_txt}}</li>
    <li>{{item.weather[0].description}}</li>
    <li>{{item.weather[0].id}}</li>
    <li>{{item.main.temp}}&deg;C</li>
</ul>

Я хочу добавить значок к этой информации, например, шрифт.

Итак, я нашел это: <i class="owf owf-200"></i> Это послужит мне просто правильно, но число должно меняться динамически. Таким образом, число является {{item.weather[0].id}} в v-for.

У меня вопрос такой; Как я могу смешать эти два вместе?

Я пробовал что то подобное <i class="owf owf-{{item.weather[0].id}}"></i>но он явно имеет неправильный синтаксис.

Любая помощь будет оценена!

Answer 1

Вы можете использовать v-bind:class - который позволяет добавлять две строки, как в Javascript. Таким образом, значение должно быть 'owf owf-' + item.weather[0].id,

Во фрагменте я сделал это с помощью фиктивных данных и изменений цвета для двух разных классов, но вы должны понять.

var app = new Vue({
  el: "#app",
  data:{ 
    items: [
      {
        weather: [{ id: 200 }],
        txt: "Some text"
      },
      {
        weather: [{ id: 300 }],
        txt: "Some other text"
      }
    ]
  }
});

.owf.owf-200 {
  color: red;
}

.owf.owf-300 {
  color: blue;
}

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

<div id="app">
  <template v-for="item in items">
    <span v-bind:class="'owf owf-' + item.weather[0].id">
      {{ item.txt }}
    </span>  
    <br />
  </template>
</div>