【问题标题】:VueJS 2 typeahead callback methodVueJS 2 typeahead 回调方法
【发布时间】:2017-06-05 02:44:00
【问题描述】:

我正在使用来自 vue-strap 的 Typeahead 组件,

在我点击选择后尝试进行回调,这会将数据标记到我的输入文本中。

一旦我按下回车键,inventoryName 和inventoryId 就会被成功标记,但inventoryCode 组件会被重置。

如何防止它重置或我做错了什么?正如我从 console.log 中看到的那样,它具有价值。

<typeahead v-model="inventoryCode" placeholder="Inventory code..." async="{{url('api/inventory')}}/" :template="inventorySearch" :on-hit="inventoryCallBack"></typeahead>
<input type="text" name="inventory_name" id="inventory_name" class="form-control" v-model="inventoryName" readonly />

new Vue({
        el: '#app',
        components:{Typeahead},
        data: {
            'inventoryCode': '',
            'inventoryName': '',
            'inventoryId': '',
            'inventorySearch': '<div style="min-width:150px;"><b>@{{item.inventory_name}}</b></div><div>@{{item.inventory_code}}</div><div>@{{item.inventory_short_desc}}</div>'
        },
methods:{
    inventoryCallBack: function(item){
                    console.log(item.inventory_code);
                    this.inventoryCode = item.inventory_code;
                    this.inventoryName = item.inventory_name;
                    this.inventoryId = item.id;
                    console.log(this.inventoryCode);
                },
}
});

【问题讨论】:

  • 首先,inventoryCallBack 函数应该在方法属性中。
  • @SrinivasDamam 对不起,错字,它在方法道具中。正在为其他模型分配值,但未分配 inventoryCode。
  • components: { Typeahead } 中有一个大写的“T”。不应该是小写吗?

标签: laravel vue.js vuejs2 typeahead vue-strap


【解决方案1】:
inventoryCallBack: function(item){
                    console.log(item.inventory_code);
                    this.inventoryCode = item.inventory_code;
                    this.inventoryName = item.inventory_name;
                    this.inventoryId = item.id;
                    return item.inventory_code
                },

这应该可以解决问题,错过了这部分。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-01-27
    • 2020-05-26
    • 2018-12-13
    • 2018-10-15
    • 1970-01-01
    • 2018-03-17
    相关资源
    最近更新 更多