我想创建一个搜索栏,用于搜索json对象的数据并向用户显示数据。我目前的代码看起来像这样,它工作正常。
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id='app'> <input type='text' v-model='keyword' placeholder='search title'> <button v-on:click="">automotive</button> <div v-for="post in filteredList"> <iframe width="420" height="315" v-bind:src="post.link"> </iframe> <a v-bind:href="post.link">{{post.title}}</a> </div> </div>
<script> "use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Post = function Post(title, link, author, img) {
_classCallCheck(this, Post);
this.title = title; this.link = link; this.author = author; this.img = img; }; var app = new Vue({ el: '#app', data: {
keyword:'',
postList: [
new Post(
'Vue.js',
'https://www.youtube.com/embed/tgbNymZ7vqY',
'Chris',
'https://vuejs.org//images/logo.png'
),
new Post(
'React.js',
'https://www.youtube.com/embed/k3frK9-OiQ0',
'Tim',
'http://daynin.github.io/clojurescript-presentation/img/react-logo.png'
),
new Post(
'Angular.js',
'https://angularjs.org/',
'Sam',
'https://angularjs.org/img/ng-logo.png',
),
new Post(
'Ember.js',
'http://emberjs.com/',
'Rachel',
'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
),
new Post(
'Meteor.js',
'https://www.meteor.com/',
'Chris',
'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
),
new Post(
'Aurelia',
'http://aurelia.io/',
'Tim',
'https://cdn.auth0.com/blog/aurelia-logo.png'
),
new Post(
'Node.js',
'https://nodejs.org/en/',
'A. A. Ron',
'https://code-maven.com/img/node.png'
),
new Post(
'Pusher',
'https://pusher.com/',
'Alex',
'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
),
new Post(
'Feathers.js',
'http://feathersjs.com/',
'Chuck',
'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
), ] }, methods: {
}, computed:{
filteredList(){
return this.postList.filter((post) => {
return post.title.toLowerCase().includes(this.keyword.toLowerCase());
});
} } })
</script> </body> <html>
忽略链接的内容并不重要。然而,我遇到的问题是通过axios请求从外部源工作。我之前已经完成了axios请求并获得了json数据,但我正在努力使这个搜索功能与它一起工作。以下是破解代码的示例(忽略v-on:单击它尚未设置。忽略没有我可以处理的视频,以后我只需要搜索功能来处理来自的json数据axios request)但我一直得到错误,如'类型错误:this.item未定义'和'对象错误'无论如何继承代码:
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id='app'>
<input type='text' v-model='keyword' placeholder='search item'>
<button v-on:click="">automotive</button>
<div v-for="item in filteredList">
<p>{{item.name}}</p>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
keyword:'',
itemList: '',
},
created: function() {
this.loaddata();
},
methods: {
loaddata: function(){
var vueapp = this;
axios.get('https://jsonplaceholder.typicode.com/users').then(function (response){
vueapp.itemList = response.data;
})
},
},
computed:{
filteredList(){
return this.item.filter((item) => {
return item.name.toLowerCase().includes(this.keyword.toLowerCase());
});
}
}
})
</script>
</body>
<html>
您没有在数据中声明item
。当你没有申报时,你不能在你的this.item.filter
方法中调用filteredList()
。
你可以用filteredList
更改你的this.itemList.filter()
,这是loaddata()
中加载的列表