How to add a class?

Question

JavaScript

How to add class from ajax response to {{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 response

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

Answer 1

First - replace the name of the class property, keywords cannot be used (in fact, you can, but I won’t tell you how, first learn how to give normal names to properties). Let it be className, for example.
Second, :class="className". Well, read the documentation .