Question

我在vue.js中相当新，我正在尝试一个可以找到书籍的应用程序，但我现在卡在了重用组件的位置。
当我打开应用程序时，bookList组件用于显示查看次数最多的书籍我想做的是：
从输入字段中搜索书籍并使用响应填充bookList组件，然后在同一视图中呈现它。这是我的代码。欢迎提出任何建议

<div id="app">
  <nav id="menu">
    <input type="text" v-model="newSearch" />
  </nav>

  <main id="panel">
    <header>
      <button class="toggle-button">☰</button>
      <!-- <books :books="books" :url="url"></books> -->
      <router-view></router-view>
    </header>
  </main>
</div> <!-- end app -->

<template id="book-list-template">
  <ul>
    <li v-for="book in books">
      <div class="content">
        <a v-link="{ name: 'book', params: { bookId: book.ID } }">
          <img :src="book.thumbnail" class="center-block">
          <p>{{book.title}}</p>
        </a>
      </div>
    </li>
  </ul>
</template>
<template id="single-book-template">
  <div class="content" v-for="book in book">
    <img :src="book.cover" class="center-block prueba">
    <p>{{book.title}}</p>
  </div>
</template>

url = 'api_url'
//defining some components
var bookList = Vue.extend({
    template: '#book-list-template',
    data: function() {
        return {
            books: [],
        }
    },
    ready: function() {
        this.getBooks();
    },
    methods: {
        getBooks: function() {
            this.$http.jsonp(url+'criteria=most_viewed').then(function(response) {
                this.$set('books', response.data);
            }, function(response) {
                alert(response.status);
            });
        }
    }
});


var singleBook = Vue.extend({
    template: '#single-book-template',
    data: function() {
        return {
            book: ''
        }
    },
    ready: function() {
        this.getBookById();
    },
    methods: {
        getBookById: function() {
            this.$http.jsonp(url+'id='+this.$route.params.bookId).then(function(response) {
                this.$set('book', response.data);
            }, function(response) {
                alert(response.status);
            });
        }
    }
});

//creating a vue instance
new Vue({
    el: '#app',
    data: {
      newSearch: ''
    }
}) //end vue

var App = Vue.extend({})

var router = new VueRouter()

router.map({
    '/': {
        component: bookList
    },
    'book/:bookId': {
        name: 'book',
        component: singleBook
    }
})

router.start(App, '#app')

Answer 1

您有一个book list模板，用于处理图书清单的搜索和过滤，然后是book模板，用于处理单个图书的显示。所以它可能看起来像这样：

<template id="book-list-template">
  <input type="text" v-model="searchText">
  <ul>
    <li v-for="book in books | filterBy searchText">
      <single-book :book="book"></single-book>
    </li>
  </ul>
</template>

<template id="single-book-template">
  <div class="content">
    <img :src="book.cover" class="center-block prueba">
    <p>{{book.title}}</p>
  </div>
</template>

因此列表模板只会生成一堆单本模板。该列表处理书籍的加载和过滤（使用搜索栏或其他），书籍模板处理每本书的任何功能（即。＃34;添加到我的阅读列表＆＃34;或＆＃34;订单簿＆＃34;按钮。在您的单一图书模板中，您需要添加prop图书（而不是将其作为data媒体资源），以便它可以接受来自你的列表模板。

var singleBook = Vue.extend({
    template: '#single-book-template',
    props: ['book']
    }
});

var bookList = Vue.extend({
template: '#book-list-template',
data: function() {
    return {
        books: [],
        searchText:""
    }
},
ready: function() {
    this.getBooks();
},
methods: {
    getBooks: function() {
        this.$http.jsonp(url+'criteria=most_viewed').then(function(response) {
            this.$set('books', response.data);
        }, function(response) {
            alert(response.status);
        });
    }
},
components:{
    "single-book":singleBook
}
});

最后，在图书清单组件中添加一个输入，允许用户搜索图书。您可以将其建模为名为searchText的数据。然后，您可以在v-for="book in books | filterBy searchText"

上使用Vue的filterBy

Answer 2

您可能正在寻找keep-alive指令。如果您Ctrl + F并在此搜索“保持活力”，您会找到它：http://vuejs.org/guide/components.html

试图在vue.js中重用组件

2 个答案: