Question

我正在尝试在Vuejs 2.4中构建一个小应用程序，其中我将一些数据定义为：

data() {
    return {
        backLogs: '',
        open: '',
        inProgress: '',
        done: '',
        accepted: '',
        sent: '',
    }
},

我正在进行不同的axios调用，这些调用会给出这些数据点的值，所以我在beforeCreate()函数中提到了这些数据：

beforeCreate() {
    axios.get('api/to-do/back-logs', {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.backLogs = response.data.tasks
        }
    })
    axios.get('api/to-do/open', {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.open = response.data.tasks
        }
    })
    axios.get('api/to-do/in-progress', {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.inProgress = response.data.tasks
        }
    })
    axios.get('api/to-do/done', {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.done = response.data.tasks
        }
    })
    axios.get('api/to-do/accepted', {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.accepted = response.data.tasks
        }
    })
    axios.get('api/to-do/sent', {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            this.sent = response.data.tasks
        }
    })
},

现在显示我HTML中的列表，即我template部分：

<div class="nits-agile-task">
    <div class="ibox">
        <div class="ibox-content">
            <h3>Back Logs</h3>
            <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p>
            <draggable :options="{group: 'task-list'}" :element="'ul'" class="sortable-list connectList agile-list" @change="update">
                <li v-for="item in backLogs" :class="color(item.priority)">
                    <router-link :to="{path: '/task/'+item.unique_id}">
                        <strong>{{ item.title }}.</strong>
                    </router-link>
                    <div v-if="item.project" class="agile-detail">
                        Project name: <router-link :to="{path: '/project/'+item.project.unique_id}">{{ item.project.title }}</router-link>
                    </div>
                    <div class="agile-detail">
                        <i class="fa fa-clock-o"></i> {{ item.created_at }}
                    </div>
                </li>
            </draggable>
        </div>
    </div>
</div>

此HTML模板与backLogs, open, inProgress, done, accepted, sent相同，以保留我的代码DRY（不要重复自己）我尝试制作变量集：

types: [
    {name: 'Back Logs', slug: 'backLogs'},
    {name: 'Open', slug: 'open'},
    {name: 'In Progress', slug: 'inProgress'},
    {name: 'Done', slug: 'done'},
    {name: 'Accepted', slug: 'accepted'},
    {name: 'Sent', slug: 'sent'}
]

然后我只是添加v-for这个types，所以现在我的模板看起来像：

<div v-for="type in types" class="nits-agile-task">
    <div class="ibox">
        <div class="ibox-content">
            <h3>{{ type.name }}</h3>
            <p class="small"><i class="fa fa-hand-o-up"></i> Drag task between list</p>
            <draggable :options="{group: 'task-list'}" :element="'ul'" class="sortable-list connectList agile-list" @change="update">
                <li v-for="item in type.slug" :class="color(item.priority)">
                    <router-link :to="{path: '/task/'+item.unique_id}">
                        <strong>{{ item.title }}.</strong>
                    </router-link>
                    <div v-if="item.project" class="agile-detail">
                        Project name: <router-link :to="{path: '/project/'+item.project.unique_id}">{{ item.project.title }}</router-link>
                    </div>
                    <div class="agile-detail">
                        <i class="fa fa-clock-o"></i> {{ item.created_at }}
                    </div>
                    <div class="agile-detail">
                        <a href="#" class="pull-right btn btn-xs btn-white">Feature</a>
                        <a href="#" class="pull-right btn btn-xs btn-white">Fixes</a>
                        <a href="#" class="pull-right btn btn-xs btn-white">To Do</a>
                        <a href="#" class="pull-right btn btn-xs btn-white">Bugs</a>
                    </div>
                </li>
            </draggable>
        </div>
    </div>
</div>

但它给了我荒谬的结果：

但是当我看到控制台时，每个数据点只有3个元素。

希望你得到我想要达到的目标，帮助我解决这个问题。感谢

Answer 1

如果您的任务数据看起来像关联数组，例如：

{
  'backLog': [
    {
      id: 0,
      title: '...'
    },
    {
      id: 3,
      title: '...'
    },
    ...
  ]
  'inProgress': [
    {
      id: 1,
      title: '...'
    },
    ...
  ]
}

然后你可以像这样访问v-for中的tasks数组：v-for="item in tasks[type.slug]"

Answer 2

您应该使用：

FALSE

感谢感谢评论。

在Vuejs中使用动态元素实现v-for

2 个答案: