Vue.js передают реквизиты для динамического изменения класса компонента

62
6

Я пытаюсь изучить Vue и столкнулся с этой проблемой.

Vue.component('alert', {
props: ['type', 'bold', 'msg'], template: '<div class="alert alert-{{ type }}" role="alert"><b>{{ bold }}</b> {{ msg }}</div>'
});

var componentProps=new Vue( {
el: '#app',
}

);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app" class="container">
<alert type="info" bold="Greetings." msg="This is some information."></alert>
<alert type="warning" bold="Slow down." msg="You might crash."></alert>
<alert type="danger" bold="Oh no!" msg="The program just crashed!"></alert>
<alert type="success" bold="Rock Out" msg="with your Props out!"></alert>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Это находится на выходе в инспекторе. Как вы можете видеть, реквизит [тип] здесь не изменен.

<div role="alert" class="alert alert-{{ type }}'"><b>Slow down.</b> You might crash.</div>

Ссылка на codepen => https://codepen.io/dakata911/pen/XEKbyq?editors=1010

спросил(а) 2018-03-15T18:27:00+03:00 3 года назад
1
Решение
106

В vue 2 вы больше не можете использовать интерполяции в атрибутах. Теперь у вас есть несколько возможных синтаксисов для привязок к классам и стилям. В вашем конкретном случае вы можете использовать:

<div class="alert" :class="'alert-' + type" role="alert">

Демо ниже.

new Vue({
el: '#app',
data: {
type: 'warning'
}
})
.alert { background: yellow; }
.alert-warning { color: red }
<script src="https://unpkg.com/vue"></script>

<div id="app">
<div class="alert" :class="'alert-' + type" role="alert"> Warning! </div>
</div>

ответил(а) 2018-03-15T18:41:00+03:00 3 года назад
77

По атрибутам интерполяция не работает, вы можете использовать : для привязки

:class="type"

или же

:class="[ type, other,... ]"


или же

:class="{ 'someClass': true, 'other-class': false, 'another': method() }"

И вы можете иметь оба атрибута :class="..." и class="normal class attribute" на одном элементе/теге

ответил(а) 2018-03-15T18:37:00+03:00 3 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема