Question

拥有以下vue组件

<employee-times :employees="{{$employees}}" :supplies="{{$supplies}}" :commits="{{$commits}}" :times="{{$times}}"></employee-times>

我渲染传递的道具

<template>

<div>

<select class="form-control input" v-model="currentYear" @change="filter()">
                        <option v-for="option in yearsOptions" v-bind:value="option">
                            {{ option }}
                        </option>
                    </select>
<tr v-for="employee,key in _employees" v-if="commits[key]">

                                    <td>{{ key }}</td>
                                    <td>{{ employee[0].first_name }}</td>
                                    <td>{{ employee[0].last_name }}</td>
                                    <td>{{ employee[0].nick }}</td>
                                    <td>{{ employee[0].role }}</td>
                                    <td>{{ employee[0].skill }}</td>
                                    <td v-for="n in 12">
                                        <div v-if="_commits[key][n]">{{ _commits[key][n].hours }}</div>
                                        <div v-else> </div>
                                    </td>
                                </tr>

</div>

</template>

比我尝试在更改时过滤ajax数据但数据不会更新

这是我正在尝试的脚本，但是从方法功能我无法将新数据推送到模板

<script>

    export default {
        name: 'employee-times',
        props: ['supplies', 'times', 'commits', 'employees'],
        components: {
        },

        created() {

            axios.get('/api/v1/roles', {
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            }).then(response => {
                th

    is.roles = response.data
                }).catch(error => {

                })

                this._times = this.times;
                this._commits = this.commits;
                this._supplies = this.supplies;
                this._employees = this.employees;


            },
            data() {
                return {
                    count: 0,
                    yearsOptions: [],
                    _employees: {},
                    _supplies: {},
                    _times: {},
                    _commits: [],
                    currentYear: null,
                    currentStatus: 1,
                    currentPosition: 0,
                    statusOptions: [
                        {'id': '1',
                            'text': 'Active'
                        }, {'id': '0',
                            'text': 'Inactive'
                        }],
                    currentSkillset: 'all',
                    skillsetOptions: [
                        {'id': 'all',
                            'text': 'All'
                        }, {'l1': 'l1',
                            'text': 'L1'
                        }, {'l1': 'l2',
                            'text': 'L2'
                        }, {'l1': 'l3',
                            'text': 'L3'
                        }, {'l1': 'l4',
                            'text': 'L4'
                        }, {'l1': 'l5',
                            'text': 'L5'
                        }],
                    status: {},
                    roles: {},
                    skillsets: {}
                };
            },
            mounted() {

                this.currentYear = moment().format('Y')
                var from = moment().subtract('4', 'years').format('Y')
                var to = moment().add('2', 'years').format('Y')

                while (from <= to) {
                    this.yearsOptions.push(from);
                    from++;
                }

            },
            watch: {
                '_employees': function (val, oldVal) {
                  console.log('new: %s, old: %s', val, oldVal)
                }
            },
            methods: {
                commit() {

                },
                clear() {

                },
                months() {
                    return moment.monthsShort()
                },

                filter() {
                    var data = {
                        year: this.currentYear,
                        status: this.currentStatus,
                        position: this.currentPosition,
                        //skill: currentSkillset             
                    }

                    axios.post('/api/v1/supply/track-times', data, {
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    }).then(response => {
                        this._employees = {}

                        this.$set(this, '_employees', JSON.parse(response.data.employees))
                        this.$set(this,'_times', JSON.parse(response.data.times))
                        this.$set(this,'_supplies', JSON.parse(response.data.supplies))
                        this.$set(this, '_commits', JSON.parse(response.data.commits))

                    }).catch(error => {

                    })
                }
            },
        };
    </script>

在这种情况下我错过了什么？

Answer 1

删除＆＃34; _＆＃34;来自您的数据属性的前缀，然后它应该工作。 Vue使用下划线表示内部内容，因此最好避免使用它（参见https://vuejs.org/v2/api/#data）

Answer 2

v-for和table（ref 'v-for with 2 every time'）存在问题，需要模板包装器。

参见示例CodePen。

<div id='app'>
  <table>
     <template v-for="(employee, key) in employees">
       <tr>
         <td>{{ employee.first_name }}</td>
         <td>{{ employee.last_name }}</td>
       </tr>
    </template>
  <table>
</div>

您似乎还需要删除下划线（尝试将员工更改为代码集中的_employee）。

将ajax数据推送到vue组件

2 个答案: