Question

我有动态产品列表来创建发票。现在我想从select-＆gt;选项列表中搜索产品。我在vuejs中找到了一个可能的解决方案，例如Vue-select，但我无法理解如何转换现有代码以从Vue-select中获益。请有人帮助我，我应该如何编写代码来选择＆＃39;这样我可以从列表中一次搜索产品吗？

我现有的代码是 -

<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属性，请尝试使用此代码段。

<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

}

将select转换为vue-select与动态数据（Laravel＆amp; Vuejs）

1 个答案: