Question

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

情况如下：

用户从表单
当他提交时，数据会自动添加到ul＆gt; li元素，并向API发出POST请求
当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字段是唯一的，您可以在数组中搜索以找到它...否则您可以等待将其附加到数组，直到返回函数：

    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>

跟踪数组中添加的元素？

2 个答案: