使用动态数据将 select 转换为 vue-select (Laravel & Vuejs)

Question

我有动态产品列表来创建发票。现在我想从选择->选项列表中搜索产品。我在 vuejs 中找到了类似 Vue-select 的可能解决方案，但我不明白如何转换现有代码以从 Vue-select 中受益。有人可以帮我吗，我应该如何在“选择”中编写代码，以便我可以从列表中一次搜索产品？

我现有的代码是 -

<td>
   <select id="orderproductId" ref="selectOrderProduct" class="form-control  input-sm" @change="setOrderProducts($event)">
     <option>Choose Product ...</option>
     <option :value="product.id + '_' + product.product_name" v-for="product in invProducts">@{{ product.product_name }}</option>
   </select>                      
</td>

我想将其转换为 -

<v-select :options="options"></v-select>

这样，如果我有很多产品，我也可以搜索产品。我的脚本文件是 -

<script>
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
  el: '#poOrder',
  data: {

    orderEntry: {
        id: 1,
        product_name: '',
        quantity: 1,
        price: 0,
        total: 0,
    },
    orderDetail: [],
    grandTotal: 0,
    invProducts: [],
    invProducts: [
        @foreach ($productRecords as $invProduct)
            {
                id:{{ $invProduct['id'] }},
                product_name:'{{ $invProduct['product_name'] }}',

            },
        @endforeach
    ],

  },



  methods: {
    setOrderProducts: function(event) {
        //alert('fired');
        var self = this;
        var valueArr = event.target.value.split('_');
        var selectProductId = valueArr[0];
        var selectProductName = valueArr[1];

        self.orderEntry.id = selectProductId;
        self.orderEntry.product_name = selectProductName;

        $('#invQuantity').select();
    },
    addMoreOrderFields:function(orderEntry) {
        var self = this;
        if(orderEntry.product_name && orderEntry.quantity && orderEntry.price > 0) {

            self.orderDetail.push({
                id: orderEntry.id,
                product_name: orderEntry.product_name,
                quantity: orderEntry.quantity,
                price: orderEntry.price,
                total: orderEntry.total,
            });

            self.orderEntry = {
                id: 1,
                product_name:'',
                productId: 0,
                quantity: 1,
                price: 0,
                total: 0,
            }
            $('#orderproductId').focus();
            self.calculateGrandTotal();

        } else {
            $('#warningModal').modal();
        }
        this.$refs.selectOrderProduct.focus();

    },

    removeOrderField:function(removeOrderDetail) {
        var self = this;
        var index = self.orderDetail.indexOf(removeOrderDetail);
        self.orderDetail.splice(index, 1);
        self.calculateGrandTotal();
    },

    calculateGrandTotal:function() {

        var self = this;
        self.grandTotal = 0;
        self.totalPrice = 0;
        self.totalQuantity = 0;

        self.orderDetail.map(function(order){
            self.totalQuantity += parseInt(order.quantity);
            self.totalPrice += parseInt(order.price);
            self.grandTotal += parseInt(order.total);
        });
    },


    setTotalPrice:function(event){

        var self = this;
        //self.netTotalPrice();
        self.netTotalPrice;
    }   

  },

  computed: {
    netTotalPrice: function(){
        var self = this;

        var netTotalPriceValue = self.orderEntry.quantity * self.orderEntry.price;

        var netTotalPriceInDecimal = netTotalPriceValue.toFixed(2);

        self.orderEntry.total = netTotalPriceInDecimal;

        return netTotalPriceInDecimal;
    }

  }
});

Answer 1

假设invProducts 是一个产品对象数组，每个产品对象都有一个product_name 属性，试试这个sn-p。

<v-select @input="selectChange()"   :label="product_name" :options="invProducts" v-model="selectedProduct">

</v-select>

创建一个名为selectedProduct 的新数据属性并将其绑定到 vue-select 组件。因此，每当 vue-select 中的选择发生变化时，selectedProduct 的值也会发生变化。除此之外，@input 事件可用于触发组件中的方法。您可以在该方法中获取所选产品并在该事件侦听器中执行进一步操作。

methods: {

 selectChange : function(){
 console.log(this.selectedProduct);
 //do futher processing

}