Как добавить класс?

Question

[DemonFromIrk]

Как добавить класс из ответа ajax к {{status}}?

div

<div id="metadata" class="box-body box-profile">
                                <ul class="list-group list-group-unbordered">
                                    <li class='list-group-item'><b>Дата создания:</b> <a class='pull-right'>{{openDate}}</a></li>
                                    <li class='list-group-item'><b>Статус</b> <a class='pull-right'>{{status}}</a></li>
                                    <li class="list-group-item">
                                        <b>Полная стоимость</b> <a class="pull-right">{{fullPrice}}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Предоплачено</b> <a class="pull-right">{{prepay}}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Осталось оплатить</b> <a class="pull-right">{{estimatedPay}}</a>
                                    </li>
                                </ul>
                                <a href="#" class="btn btn-success btn-block"><b>Отправить</b></a>
                                <a href="#" class="btn btn-warning btn-block"><b>Отложить</b></a>
                                <a href="#" class="btn btn-danger btn-block"><b>Удалить</b></a>
                            </div>

JS

<script>
        var metadata = new Vue({
            el: '#metadata',
            data:{
                openDate: '[НЕ ЗАГРУЖЕНО]',
                status: '[НЕ ЗАГРУЖЕНО]',
                fullPrice: '[НЕ ЗАГРУЖЕНО]',
                prepay:'[НЕ ЗАГРУЖЕНО]',
                estimatedPay:'[НЕ ЗАГРУЖЕНО]',
                class: ''
            },
            created() {
                // Таким же образом можно подгружать и ответ аякса
                this.getMeta();
            },

            methods: {
                upData(data) {
                    Object.assign(this.$data, data)
                },
                getMeta() {
                    $.post('/api/v1/order',
                        {
                            act: 'getMeta',
                            order: '<?=$_REQUEST['order'];?>'
                        }
                    )
                        .done(resp=> {
                            console.log(resp);
                            var d = jQuery.parseJSON(resp);
                            this.openDate = d.openDate;
                            this.status = d.status;
                            this.fullPrice = d.fullPrice;
                            this.prepay = d.prepay;
                            this.estimatedPay = d.estimatedPay;
                            this.statusText = d.statusText;
                            this.class = d.class;
                            //this.upData(d);
                            console.log(d);
                        })
                        .fail(()=>{
                            this.upData({
                                openDate: '[НЕ ПОЛУЧЕНЫ ДАННЫЕ]',
                                status: '[НЕ ПОЛУЧЕНЫ ДАННЫЕ]',
                                fullPrice: '[НЕ ПОЛУЧЕНЫ ДАННЫЕ]',
                                prepay:'[НЕ ПОЛУЧЕНЫ ДАННЫЕ]',
                                estimatedPay:'[НЕ ПОЛУЧЕНЫ ДАННЫЕ]'
                            })
                        })
                }
            }
        });
    </script>

Ответ api

{"openDate":"11:46 14.11.18","status":"waiting","prepay":"0","class":"text-green","fullPrice":0,"estimatedPay":0}

Answer 1

[0xD34F]

Во-первых - замените имя свойства class, ключевые слова использовать нельзя (на самом деле можно, но как - я вам говорить не стану, сперва научитесь давать свойствам нормальные имена). Пусть будет className, например.

Во-вторых, :class="className". Ну и документацию почитайте.

Comments

[DemonFromIrk]

Спасибо. А как мне лучше сделать отображение кнопок в зависимости от статуса?
Я пока немного не разобрался, как лучше обновлять доступные кнопки в зависимости от статуса :с
Кнопки у меня такие:

<a onclick="changeState('inProgress')" class="btn btn-success btn-block"><b>В работу</b></a>
<a onclick="changeState('pending')" class="btn btn-warning btn-block"><b>Отложить</b></a>
<a onclick="changeState('delete')" class="btn btn-danger btn-block"><b>Удалить</b></a>

[0xD34F]

Повторюсь - читайте документацию. Вот прям возьмите и прочитайте всё, от начала и до конца - чтобы примерно представлять, что вообще vue умеет.

[DemonFromIrk]

0xD34F, Спасибо !!