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: '',
        // ...
    },
    // ...
})

属性或方法“filterQuery”未在实例上定义，但在呈现期间引用

1 个答案: