vuejs2-[Vue warn]：渲染时出错：“vuejs2”；TypeError:“u vm.\u f（…）不是函数”；发生错误
我正在使用定制的“sortable”指令进行表格排序，同时在表格中添加和删除行，并在我的项目中使用会计插件来格式化货币值。初始化该记帐插件后，我的控制台中仅出现此错误 我的用户界面也变空了 addBill.vuevuejs2-[Vue warn]：渲染时出错：“vuejs2”；TypeError:“u vm.\u f（…）不是函数”；发生错误,vuejs2,Vuejs2,我正在使用定制的“sortable”指令进行表格排序，同时在表格中添加和删除行，并在我的项目中使用会计插件来格式化货币值。初始化该记帐插件后，我的控制台中仅出现此错误 我的用户界面也变空了 addBill.vue <template> <div> <b-card> <table class="table table-hover"> <thead>
<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>
不
描述
数量
价格
税
全部的
{{index+1}}
0%
10%
20%
税
{{taxtotal | currencyDisplay}}
全部的
{{total | currencyDisplay}}
传送
GRANDTOTAL
{{grandtotal=total+delivery}
从“Vue”导入Vue
从“会计”导入会计
//var会计=要求（‘会计’）
//module.exports=会计
Vue.filter（'currencyDisplay'{
//模型->视图
读：功能（val）{
如果（val>0）{
返回会计。格式货币（val，“$”，2，“，”，”；
}
},
//查看->模型
写入：函数（val、oldVal）{
返回会计。未格式化（val，“，”；
}
});
Vue.指令（'可排序'{
双向：对，
深：是的，
绑定：函数（）{
var=这个；
变量选项={
可拖动：Object.keys（this.modifiers）[0]
};
this.sortable=sortable.create（this.el，选项）；
console.log（'sortable-bound！'）
this.sortable.option（“onUpdate”，函数（e）{
that.value.splice（e.newIndex，0，that.value.splice（e.oldIndex，1）[0]）；
});
this.onUpdate=函数（值）{
价值=价值；
}
},
更新：函数（值）{
此.onUpdate（值）；
}
});
导出默认值{
数据（）{
返回{
行：[
//初始数据
{数量：5，描述：“某物”，价格：55.20，税：10}，
{数量：2，说明：“其他东西”，价格：1255.20，税：20}，
],
//总数：0，
//总计:0,，
//总数:0,，
//交货期：40
}
},
计算：{
总计：功能（）{
var t=0；
$.each（this.rows，function（i，e）{
t+=会计不可格式化（如总计，“，”）；
});
返回t；
},
taxtotal:函数（）{
var-tt=0；
$.each（this.rows，function（i，e）{
tt+=会计不可格式化（如税额，“，”；
});
返回tt；
}
},
方法：{
addRow:函数（索引）{
试一试{
this.rows.splice（索引+1,0，{}）；
}捕获（e）
{
控制台日志（e）；
}
},
removeRow:函数（索引）{
此.rows.splice（索引，1）；
}
}
}
关于如何迁移到Vue.js 2可能没有关系，但为什么要全局定义
过滤器指令