搜索按钮不会获​​取结果Vue

Question

这是我的html文件

<div id="app1" v-cloak>
        <input v-model="term" type="search">
        <button @click="search">Search</button>
        <p/>
            <div v-for="post in posts" class="post">
                    <p><strong>@{{post.title}}</strong></p>
                    <p>@{{post.body}}</p  
                    <br clear="left">
                </div>
</div>

这是我的app.js文件

const app1 = new Vue({
    el:'#app1',
    data:{
        term:'',
        posts:[],
        noResults:false,
        searching:false
    },
    methods:{
        search:function() {
        const url = `http://jsonplaceholder.typicode.com/posts/${encodeURIComponent(this.term)}` ;
            fetch(url)
            .then(res => res.json())
            .then(res => {this.posts = res.posts;})
        }
    }
  });

当按下带有值的搜索按钮时，如何使搜索结果附加到帖子类别中？通过网络中的chrome开发工具，结果可以正确显示，但不会显示在我的页面上，我该如何实现？

Answer 1

您的最后一行应该是：

WMIC

.then(posts => this.posts = posts)

const app1 = new Vue({
  el:'#app1',
  data: {
    term:'',
    posts:[],
    noResults:false,
    searching:false
  },
  methods:{
    search: function() {
      const url = `http://jsonplaceholder.typicode.com/posts/${encodeURIComponent(this.term)}` ;
       fetch(url)
        .then(res => res.json())
        .then(posts => this.posts = posts)
    }
  }
});

---