屬性或方法「filterQuery」未在該實例定義，但引用時呈現

Question

我的HTML代碼的一部分是在這裏：

<input v-model="filterQuery" placeholder="Filter rules" class="form-control"> 
<table v-if="filteredUsers.length"> 
     <tbody is="transition-group" name="user-list"> 
     <tr v-for="user in filteredUsers" :key="user.id"> 
      <td v-for="(column,index) in tableColumns"> 
       <div class="rules"> 
        {{ getField(user, column.field) }} 
       </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    <p v-if="statusMessage" class="well"> 
     {{ statusMessage }} 
    </p> 

然後我的腳本的部分是：

export default ({ 
    data: { 
      tableColumns: [{ 
      field: 'name' 
      }], 
      rules: [], 
      filterQuery: '', 
      orderByField: 'name', 
      fetchError: false 
     }, 
    created: function() { 
      this.fetchUsers() 
     }, 
    methods: { 
      fetchUsers: function() { 
      var vm = this 
      vm.rules = [] 
      vm.fetchError = false 
      fetch('http://172.26.3.44:8002/orientDbRestAPI/rules').then(function (response) { 
       return response.json() 
      }).then(function (rules) { 
       vm.rules = rules.result 
      }).catch(function() { 
       vm.fetchError = true 
      }) 
      }, 
      getField: function (object, field) { 
      return _.at(object, field)[0] 
      } 
    }, 
     computed: { 
      filteredUsers: function() { 
      var vm = this 
      return _.orderBy(vm.rules.filter(function (user) { 
       var regex = new RegExp(vm.filterQuery, 'i') 
       console.log('>>>> ' + user.name + ' -- ' + vm.filterQuery) 
       return (regex.test(user.name)) 
      }), vm.orderByField) 
      }, 
      statusMessage: function() { 
      if (this.fetchError) { 
       return 'There was a problem fetching the rules. JSONPlaceholder might be down.' 
      } 
      if (this.rules.length) { 
       if (!this.filteredUsers.length) { 
       return 'Sorry, no matching rules were found.' 
       } 
      } 
      else { 
       return 'Loading...' 
      } 
      } 
    }) 

與上面的代碼，單擊按鈕時會發生下面的錯誤。

vue.runtime.esm.js A427：430 [Vue的警告]：屬性或方法 「filterQuery」 未在實例中定義，但在 引用渲染。確保在數據 選項中聲明反應數據屬性。

Answer 1

在模板中使用filterQuery但你有沒有在您的實例的data或computed性聲明。您應該這樣定義：

export default ({ 
    data: { 
     filterQuery: '', 
     // ... 
    }, 
    // ... 
})