Question

我正在使用自定义＆＃34;可排序＆＃34;指令用于表格排序，同时在表格中添加和删除行，并在我的项目中使用会计插件来格式化货币值。初始化该记帐插件后，我的控制台中只发生了此错误

我的用户界面也变空了。

addBill.vue

 <template>
    <div>
        <b-card>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th style="width: 20px;">No.</th>
                    <th>Description</th>
                    <th style="width: 80px;">Qty</th>
                    <th style="width: 130px;" class="text-right">Price</th>
                    <th style="width: 90px;">Tax</th>
                    <th style="width: 130px;">Total</th>
                    <th style="width: 130px;"></th>
                </tr>
            </thead>
            <tbody v-sortable.tr="rows">
                <tr v-for="(row, index) in rows"  v-bind:key="row.qty">
                    <td>
                        {{ index +1 }}
                    </td>
                    <td>
                        <input class="form-control" v-model="row.description"/>
                    </td>
                    <td>
                        <input class="form-control" v-model="row.qty" number/>
                    </td>
                    <td>
                        <input class="form-control text-right" 
                            v-model="row.price" number data-type="currency"/>
                    </td>
                    <td>
                        <select class="form-control" v-model="row.tax">
                            <option value="0">0%</option>
                            <option value="10">10%</option>
                            <option value="20">20%</option>
                        </select>
                    </td>
                    <td>
                       <input class="form-control text-right" :value="row.qty * row.price" number readonly />
                       <input type="hidden" :value="row.qty * row.price * row.tax / 100"  number/>

                    </td>
                    <td>
                        <button class="btn btn-primary btn-sm pull-left" @click="addRow(index)"><i class="fa fa-plus"></i></button>
                        <button class="btn btn-danger btn-sm pull-right" @click="removeRow(index)"><i class="fa fa-minus"></i></button>

                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" class="text-right">TAX</td>
                    <td colspan="1" class="text-right">{{ taxtotal | currencyDisplay }}</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5" class="text-right">TOTAL</td>
                    <td colspan="1" class="text-right">{{ total | currencyDisplay }}</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5" class="text-right">DELIVERY</td>
                    <td colspan="1" class="text-right"><input class="form-control text-right" v-model="delivery" number/></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5" class="text-right"><strong>GRANDTOTAL</strong></td>
                    <td colspan="1" class="text-right"><strong>{{ grandtotal = total + delivery }}</strong></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
        </b-card>
    </div>
    </template>

    <script >
    import Vue from 'vue'

    import accounting from 'accounting'

    // var accounting = require('accounting')
    // module.exports = accounting

    Vue.filter('currencyDisplay', {
        // model -> view
        read: function (val) {
            if (val > 0) {
                return accounting.formatMoney(val, "$", 2, ".", ",");
            }
        },
        // view -> model
        write: function (val, oldVal) {
            return accounting.unformat(val, ",");
        }
    });

    Vue.directive('sortable', {
        twoWay: true,
        deep: true,
        bind: function () {
            var that = this;

            var options = {
                draggable: Object.keys(this.modifiers)[0]
            };

            this.sortable = Sortable.create(this.el, options);
            console.log('sortable bound!')

            this.sortable.option("onUpdate", function (e) {            
                that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
            });

            this.onUpdate = function(value) {            
                that.value = value;
            }
        },
        update: function (value) {        
            this.onUpdate(value);
        }
    });

    export default {
        data() {
            return {
            rows: [
                //initial data
                {qty: 5, description: "Something", price: 55.20, tax: 10},
                {qty: 2, description: "Something else", price: 1255.20, tax: 20},
            ],
            // total: 0,
            // grandtotal: 0,
            // taxtotal: 0,
            // delivery: 40
            }
        },
        computed: {
            total: function () {
                var t = 0;
                $.each(this.rows, function (i, e) {
                    t += accounting.unformat(e.total, ",");
                });
                return t;
            },
            taxtotal: function () {
                var tt = 0;
                $.each(this.rows, function (i, e) {
                    tt += accounting.unformat(e.tax_amount, ",");
                });
                return tt;
            }
        },
        methods: {
            addRow: function (index) {
                try {
                    this.rows.splice(index + 1, 0, {});
                } catch(e)
                {
                    console.log(e);
                }
            },
            removeRow: function (index) {
                this.rows.splice(index, 1);
            }
        }
    }
    </script>

Answer 1

在Vue.js 2中删除了双向过滤器，请参阅acdcjunior的帖子：

“Vue.js 2中已经替换了双向滤波器：


有些用户喜欢使用带v-model的双向过滤器来创建     有趣的输入，代码很少。虽然看似简单     然而，双向过滤器也可以隐藏很多复杂性 -     甚至通过推迟状态更新来鼓励糟糕的用户体验。代替，     包含输入的组件建议更明确和     功能丰富的创建自定义输入的方式。


有关新的最佳做法的分步指南，请按照双向进行操作   筛选迁移指南。“

如何迁移到Vue.js 2

vuejs2 - [Vue warn]：渲染错误：＆＃34; TypeError：_vm._f（...）不是函数＆＃34;发生了错误

1 个答案: