vue заполнить template из json

190
07 апреля 2017, 21:08

имеется json такого вида

[{"Id":0,"Fam":"","Name":"111","NameLong":"","Lastname":"","Datebirth":"","Phone":"","Homeadres":"","Numberud":"","Lgotcat":"","Fiovrach":"","DateInvitation":"","DateNar":"","Numbernar":"","Fioreg":"","Comment":"","NumberNar":"","DateOpen":"2017-04-11T00:00:00Z","CloseOpen":"2017-04-16T00:00:00Z"},{"Id":0,"Fam":"","Name":"dfdffg","NameLong":"","Lastname":"","Datebirth":"","Phone":"","Homeadres":"","Numberud":"","Lgotcat":"","Fiovrach":"","DateInvitation":"","DateNar":"","Numbernar":"","Fioreg":"","Comment":"","NumberNar":"","DateOpen":"2017-04-11T00:00:00Z","CloseOpen":"2017-04-08T00:00:00Z"}] 

Шаблон:

<tr v-for="(item, $index) in items">
    <template v-if="item.status!=='edit'">
            <td v-on:click="editItem(item, $index, $event)">{item}</td>
            <td style="width: 125px"  v-on:click="editItem(item, $index, $event)">{item.Name}</td>
            <td style="width: 125px"  v-on:click="editItem(item,  $index, $event)">{item.DateOpen}</td>
            <td style="width: 125px"  v-on:click="editItem(item, $index, $event)">{item.CloseOpen}</td>
            <td>
            <a v-on:click="editItem(item, $index, $event)" href="#" title="редактировать">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </a>
            </td>
            </template>
           </tr>
        </tbody>
    </table>

И js

<script type="text/javascript">
    var infoUser = new Vue({
        delimiters: ['{', '}'],
        el:'#infoUser',
        data: {
            edit: {},
            editIndex: undefined,
            items: null
        },
        mounted:function(){
            this.setDefaultItems();
        },
        watch:{
            edit: function(){
                $('.born').mask("99.99.9999");
            }
        },
        methods: {
            setDefaultItems: function (){
                var items;
                this.$http.get('/listNar?id=66').then(response =>{
                    //this.items = response.body;
                    items = response.data;
                });
                this.items = items;
                console.log(this.items)
            },
            editItem: function(item, index, e){
                alert("")
                for(var i = 0, len = this.items.length; i < len ; i++) {
                    this.items[i].status = '';
                    alert(items[i])
                }
                this.$data.edit = Vue.util.extend({}, item);
                this.$data.editIndex = index;
                item.status = 'edit';
            },
            successEdit: function (item, index, e) {
                this.$data.items.$set(index, this.$data.edit);
            },
            cancelEdit: function (item, index, e) {
                item.status = '';
            }
        }
    });
   </script>

Как правильно вывести items в шаблоне? И правильно ли я принимаю response с сервера и передаю его в items?

Answer 1

Вот так правильно:

        this.$http.get('/listNar?id=66').then(data =>{
            this.items = JSON.parse(data.body);
            console.log(this.items)
        });