跟踪数组中添加的元素？

Question

我正在玩 vue.js 和 .vue 组件，作为新手，我想知道如何跟踪添加到数组中的元素。

情况如下：

用户从表单添加新元素
当他提交时，数据会自动添加到一个ul>li元素中，并向API
POST 完成后，我想用来自服务器的新数据更新特定的 li。

问题是，我无法将最后一个 li 作为目标，因为服务器可能需要时间来处理请求（他做了很多工作），因此用户可能已添加 1、5、10 个其他条目与此同时。

那我该怎么办？

到目前为止，这是我的代码：

<template>
    <form method="post" v-on:submit.prevent="search">
        <input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" />
        <input type="text" placeholder="Company" required v-model="company" v-el="domainInput" />
        <input type="submit" value="Search" class="btn show-m" />
    </form>
    <ul>
        <li transition="expand" v-for="contact in contacts">
            <img v-bind:src="contact.avatar_url" width="40px" height="40px" class="cl-avatar" />
            <div class="cl-user">
                <strong class="cl-name">{{contact.name}} <span class="cl-company">{{contact.company}}</span></strong>
            </div>
        </li>
    </ul>
</template>

<script>
export default {
    data () {
        return {
            contacts: [],
            name: null,
            company: null
        }
    },
    methods: {
        search: function (event) {
            this.$http.post('/search', {
                name: this.name,
                company: this.company
            }).then(function (xhr) {
                // HERE ! How can I target the exact entry ?
                this.contacts.unshift(xhr.data)
            })

            this.name = ''
            this.company = ''

            this.contacts.unshift({'name': this.name, 'company': this.company})
        },
    }
}
</script>

感谢您的帮助！ :)

Answer 1

如果您知道 name 和 company 字段是唯一的，您可以搜索数组以找到它...否则您可以等待将其附加到数组，直到 return函数：

    search: function (event) {
        this.$http.post('/search', {
            name: this.name,
            company: this.company
        }).then(function (xhr) {
            this.contacts.unshift(xhr.data)
        })

        this.name = ''
        this.company = ''
    },

Answer 2

我终于找到了一个可行的解决方案：我为每个条目使用一个组件而不是 <li />，并在组件内管理它们的状态：

<ul>
    <contact-entry v-for="contact in contacts" v-bind:contact="contact"></contact-entry>
</ul>

这样，当我在数组中添加一个新条目时（如上所述），将生成组件 contact-entry 的一个新实例。

在该组件中，我执行了以下操作：

<script>
export default {
    props: ['contact'],
    created: function () {
        if (this.contact.id === undefined) { // If it's a new contact
            this.$http.post('search/name', { // I do the post here
                name: this.contact.name,
                domain: this.contact.company.name
            }).then(function (xhr) {
                this.contact = xhr.data // This will update the data once the server has replied, without hassle to find the correct line
            })
        }
    }
}
</script>

就是这样！ :) 在父组件中，我删除了 xhr 请求并将方法简化为：

<script>
export default {
    data () {
        return {
            contacts: [],
            name: null,
            company: null
        }
    },
    methods: {
        search: function (event) {
            this.name = ''
            this.company = ''

            this.contacts.unshift({'name': this.name, 'company': this.company})
        }
    }
}
</script>

跟踪数组中添加的元素？

Keeping track of added element in an array?

javascript

vue.js