vue how to achieve a keyword in the search box

When vue element component library built with the search box to search, how do keyword query search

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

input is a search box, button is the Search button, how to introduce and implement ui interface is not described in detail, how the search is to achieve
a, in el-input with v-model bind a parameter object, I have here a bind query query parameters

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

Second, when the input search enter a keyword, click on the search button should call to get a list of function data, the data I have here a list of functions is getGoodsList, getGoodsList generally created life-cycle function definitions. Currently the search function can be achieved!

created() {
    this.getGoodsList()
  }

Third, add a clearable in input, the keyword cleared box can be achieved, since the keyword clear, you need to retrieve a list of all the data, you also need to add here a @clear event, retrieve the entire contents