我正在将一个旧的php/jquery单页应用程序迁移到vuejs/webpack中,以方便使用后者。这是一个简单的表,它从json api获取数据并使用过滤器控件(位于它们自己的组件中)。一切正常,除了我试图使用子组件中的控件筛选表。我为用作表数据源的数组设置了一个道具。
我的App.vue
模板如下所示:
<template>
<div>
<fan-modals v-bind:fans="fans"></fan-modals>
<div class="container">
<filter-controls v-bind:fans="fans"></filter-controls>
<fans v-bind:fans="fans"></fans>
</div> <!-- end #container -->
</div>
</template>
<script>
import FilterControls from './components/FilterControls.vue';
import Fans from './components/Fans.vue';
import FanModals from './components/FanModals.vue';
export default {
name: 'app',
data: function() {
return {
fansUrl: 'example.com',
fans: []
}
},
components: {
filterControls: FilterControls,
fans: Fans,
fanModals: FanModals
},
methods: {
getFans: function (data) {
var self = this;
$.getJSON(self.fansUrl, function(data){
self.fans = data;
});
}
},
mounted() {
this.getFans();
}
}
</script>
我试图在
<FilterControls>
组件的函数中重用我在旧应用程序中使用的重构jquery脚本。下面是My<FilterControls>
子组件的脚本部分:<script>
export default {
data: function() {
return {
voltageArray: [],
rpmArray: [],
noiseLevelArray: [],
selectedVoltage: 'Voltage',
selectedRPM: 'Max RPM',
selectedNoiseLevel: 'Max dBA',
selectedImpellerSize: '',
selectedCageSize: '',
selectedPhase: '',
selectedFrequency: '',
secondVoltage: ''
}
},
props: {
fans: {
type: Array
}
},
watch: {
fans(value) {
this.populateControls(value);
}
},
methods: {
populateControls(fans) {
//create emtpy arrays for dropdowns
var voltage = [];
var rpm = [];
var noiseLevel = [];
//for each fan in fans, get voltages, rpm and noiseLevel values and add them to the empty arrays
$.each(fans, function(index, value) {
voltage.push(fans[index].voltage);
rpm.push(fans[index].rpm);
noiseLevel.push(fans[index].noise_level);
});
//deduplicate and sort arrays
this.voltageArray = $.unique(voltage).sort();
this.rpmArray = $.unique(rpm).sort(function(a, b){return a-b});
this.noiseLevelArray = $.unique(noiseLevel).sort();
},
filterFans(fans) {
var filtered = $.grep(fans, function(fan) {
if (this.selectedVoltage === "208-240++") { var secondVoltage = "230"; };
return (selectedImpellerSize === '' || fan.diameter === selectedImpellerSize);// &&
(selectedCageSize === '' || fan.cage_diameter === selectedCageSize) &&
(selectedPhase === '' || fan.phases === selectedPhase) &&
(selectedFrequency === '' || fan.frequency === selectedFrequency) &&
(selectedRPM === 'Max RPM' || fan.rpm <= parseInt(selectedRPM)) &&
(selectedNoiseLevel === 'Max dBA' || fan.noise_level <= selectedNoiseLevel) &&
(selectedVoltage === 'Voltage' || fan.voltage === selectedVoltage || fan.voltage === (jQuery.isEmptyObject(secondVoltage) ? selectedVoltage : secondVoltage));
});
fans = filtered;
}
}
}
</script>
populateControls()
方法用可能的值填充下拉列表。我正试图使用filterFans()
方法筛选用于填充表的fans
数组。当我将此方法附加到按钮时,单击会得到错误:Uncaught TypeError: Cannot read property 'length' of undefined
它引用开始于
var filtered = $.grep(fans, function(fan)
的行,所以我猜它在遍历fans
数组时遇到了问题。我知道有更好的方法,但我对Vuejs很陌生。我错过了一些很明显的东西吗?
最佳答案
在使用按钮的事件处理程序绑定时可能会出现此问题。例如,您可能拥有:
<button @click="filterFans()">Filter fans</button>
问题是缺少
fans
所需的函数参数(即filterFans
)。$.grep
试图读取fans.length
,导致您看到的错误。可以通过更新模板中的处理程序来解决此问题:
<button @click="filterFans(fans)">Filter fans</button>
或更新
filterFans
以直接读取this.fans
:filterFans() {
const filtered = $.grep(this.fans, /* ... */);
}