vue.js - 完全无法理解我这里为什么会报错啊
本文介绍了vue.js - 完全无法理解我这里为什么会报错啊的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
</head>
<body>
<div id="app">
<div id="searchBar">
Search<input type="text" v-model="searchQuery">
</div>
<grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"></grid>
<template id="gridTemplate">
<table>
<thead>
<tr>
<th v-for="col in columns">
{{ col }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="el in filtereddata">
<td v-for="col in columns">
{{ el[col] }}
</td>
</tr>
</tbody>
</table>
</template>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
Vue.component('grid',{
template: '#gridTemplate',
props: {
data: Array,
columns: Array,
filterKey: String
},
computed: {
filtereddata: function(){
var self = this;
return this.data.filter(function (data) {
return data.name.indexOf(self.filterKey) !== -1;
});
}
}
});
new Vue({
el: '#app',
data: {
searchQuery: '',
gridColumns: ['name', 'age', 'sex'],
gridData: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
});
</script>
</body>
</html>为什么会报错说我columns未定义？我头都大了
解决方案
把 template 移到 #app 外面，否则会作为 new Vue 的模板的一部分，而下面的 new Vue 中确实没有 columns：https://jsfiddle.net/pwx2tf69/
这篇关于vue.js - 完全无法理解我这里为什么会报错啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
