Question

我想获取用户的名字，将其放在h1上。

这条线的代表什么？

@select="option => selected = option">

我使用Buefy作为vue组件。

<template>
    <section>
        <div class="field">
            <b-switch v-model="keepFirst">
                Keep-first <small>(will always have first option pre-selected)</small>
            </b-switch>
        </div>
        <p class="content"><b>Selected:</b> {{ selected }}</p>
        <b-field label="Find a name">
            <b-autocomplete
                v-model="name"
                placeholder="e.g. Anne"
                :keep-first="keepFirst"
                :data="filteredDataObj"
                field="user.first_name"
                @select="option => selected = option">
            </b-autocomplete>
        </b-field>
    </section>
</template>

<script>
    import data from '@/assets/data_test.json'
    // Data example
    // [{"id":1,"user":{"first_name":"Jesse","last_name":"Simmons"},"date":"2016-10-15 13:43:27","gender":"Male"},
    // {"id":2,"user":{"first_name":"John","last_name":"Jacobs"},"date":"2016-12-15 06:00:53","gender":"Male"},
    // {"id":3,"user":{"first_name":"Tina","last_name":"Gilbert"},"date":"2016-04-26 06:26:28","gender":"Female"},
    // {"id":4,"user":{"first_name":"Clarence","last_name":"Flores"},"date":"2016-04-10 10:28:46","gender":"Male"},
    // {"id":5,"user":{"first_name":"Anne","last_name":"Lee"},"date":"2016-12-06 14:38:38","gender":"Female"}]

    export default {
        data() {
            return {
                data,
                keepFirst: false,
                name: '',
                selected: null
            }
        },
        computed: {
            filteredDataObj() {
                return this.data.filter((option) => {
                    return option.user.first_name
                        .toString()
                        .toLowerCase()
                        .indexOf(this.name.toLowerCase()) >= 0
                })
            }
        }
    }
</script>

Answer 1

@是v-on:的简写，因此它处理select事件，其函数接收option作为参数并将其分配给selected。

由于v-model绑定到name，您应该能够<h1>{{name}}</h1>在H1中显示相同的值。

data部分包含对象的主要变量。 name在那里。还有一个computed（名为filteredDataObj）应该返回一个数组（长度为零或一个）和匹配的测试数据。如果您想要其他字段（例如id），您需要查看其中。像

这样的东西

{{filteredDataObj.length ? filteredDataObj.id : ''}}

如果name匹配数据集中的任何内容，

将给出id。

输出用户名

1 个答案: