検索ボックスにキーワードを達成するためにどのようにVUE

検索ボックスを使用して構築VUE要素コンポーネントライブラリを検索するときに、どのようにキーワードクエリー検索を行います

<!-- 搜索框 -->
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear='getGoodsList'>
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>

入力は、検索ボックスで、ボタンが検索を達成するためにどのように、UIインタフェースを詳細に説明されていません紹介し、実装する方法、[検索]ボタンで
VモデルバインドパラメータオブジェクトとEL-入力で、私はここにバインドを持っています、クエリのクエリパラメータ

data() {
    return {
      // 查询参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },

第二に、入力された検索キーワードを入力し、検索ボタンをクリックし、関数データのリストを取得するために呼び出す必要があり、データは私がここに関数のリストを持っているgetGoodsList、getGoodsListは、一般的にライフサイクル関数定義を作成しています。現在、検索機能を実現することができます！

created() {
    this.getGoodsList()
  }

第三には、入力でクリアを追加し、キーワードは、あなたが、あなたはまた、全体の内容を取得、ここ@clearイベントを追加するために必要なすべてのデータの一覧を取得する必要がボックスにキーワードをクリアするので、達成することができますクリア