0

我用搜索输入制作了一个简单的数据表，

学生.js

Vue.component('student-list',{
    props: ['students'],
    template:`

<div class="table-responsive">
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
    <tr>
        <th>10</th>
        <th>9</th>
        <th>8</th>
        <th>7</th>
        <th>6</th>
        <th>5</th>
        <th>4</th>
        <th>3</th>
        <th>2</th>
        <th>1</th>
    </tr>
</thead>
<tbody>
    <student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>
    `,
    computed: 
    {
        searchResults: function(student){
            var self = this;
            return this.students.filter(
                function(student){
                    if(this.searchQuery == '' || this.searchQuery == null) { return true; }
                    console.log(this.searchQuery);
                    return (student.toString().indexOf(this.searchQuery) != -1);
                }
                );
        }
    },

//  v-if="searchResults(student)"

});

Vue.component('student',{
    props: ['student'],
    template:`
        <tr>
            <td>
                {{ student.name }} {{ student.lname }}
            </td>
            <td>
                <a href="tel:{{ student.phone }}" title="התקשר" class="table-action-btn"><i class="md-phone"></i></a>
                <a href="tel:{{ student.momPhone }}" title="התקשר לאמא" class="table-action-btn"><i class="ion-woman"></i></a>
                <a href="tel:{{ student.dadPhone }}" title="התקשר לאבא" class="table-action-btn"><i class="ion-man"></i></a>
                <a href="/users/{{ student.id }}" title="ערוך" class="table-action-btn"><i class="ion-android-settings"></i></a>
            </td>
            <td>
                {{ student.address }}
            </td>  
            <td>
                {{ student.totalTopay }}
            </td>
            <td>
                {{ student.lessonsTaken }}
            </td>
            <td>
                {{ student.cancelCount }}
            </td>    
            <td>
                {{ student.phone }}
            </td>
            <td>
                {{ student.momPhone }}
            </td>
            <td>
                {{ student.dadPhone }}
            </td>
            <td>
                {{ student.email }}
            </td>
        </tr>
    `

});

new Vue({
    el: '#content-page',
    data: {
        'searchQuery': ''
    }
});

HTML

....
<div id="content-page">
        <input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
....
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="{{ asset('js/students.js') }}"></script>
...

现在，由于某种原因，每当我将搜索留空时，它都会根据需要工作，但是当我通过输入文本框（他的 v-model 附加到 searchQuery 变量）来更改输入字段时，什么都没有改变，当我打电话时它（this.searchQuery）在开发工具控制台上，它说未定义。我错过了什么？提前谢谢大家！

4

1 回答 1

1

我已经稍微编辑了您的代码以使其正常工作并删除了一些代码行，因为我不想重新创建整个学生对象。我通过了search-queryas 道具并添加<student-list />到您的模板中。在您的过滤器功能中，我替换toString为JSON.stringify, 因为student是一个对象并toString打印出来[object Object]。另外，我更改了props对象并添加了它们的类型。

最后一个小错误：

属性内的插值已被弃用。请改用 v-bind 或冒号简写。

不要href="tel:{{ student.phone }}"使用这样的东西:href="'tel:' + student.phone"。

Vue.component('student-list',{
  props: {
    students: {
      type: Array
    },
    searchQuery: {
      type: String
    }
  },
  template:`<div class="table-responsive">
searchQuery: {{searchQuery}}
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>`,
  computed:  {
    searchResults() {
      return this.students.filter(student => JSON.stringify(student).indexOf(this.searchQuery) != -1);
    }
  },
});

Vue.component('student',{
  props: {
    student: {
      type: Object
    }
  },
  template:`<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<a :href="'tel:' + student.phone" title="התקשר" class="table-action-btn">tel-icon</a>
</td>
</tr>`
});

new Vue({
  el: '#content-page',
  data: {
    'searchQuery': ''
  }
});
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  </head>
  <body>
    <div id="content-page">
      <student-list :search-query="searchQuery" :students="[{
                                                           id: 1,
                                                           name: 'Peter',
                                                           lname: 'Parker',
                                                           phone: 12345
                                                           },{
                                                           id: 2,
                                                           name: 'Bat',
                                                           lname: 'Man',
                                                           phone: 1234
                                                           }]"></student-list>

      <input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
    </div>
  </body>
</html>

我的第二个解决方案

将此添加到您的计算中：

computed:  {
  searchQuery() {
     return this.$parent.searchQuery || '';
  },
  ...
}
...

您访问parentof student-list，但我认为这不是一个好方法，因为您看不到从哪里获取这些数据。

希望这会对您有所帮助。

于 2018-01-17T22:09:29.253 回答