V-Model 不会更新

Question

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

Student.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 变量）来更改输入字段时，没有任何变化，当我在 Dev Tools 控制台上调用它 (this.searchQuery) 时，它显示未定义。我错过了什么？提前谢谢大家！

Answer 1

我对您的代码进行了一些编辑以使其正常工作并删除了一些代码行，因为我不想重新创建整个学生对象。我将 search-query 作为 prop 传递，并将 <student-list /> 添加到您的模板中。在你的过滤器函数中，我用 JSON.stringify 替换了 toString，因为 student 是一个对象，toString 打印出 [object Object]。另外，我更改了 props 对象并添加了它们的类型。

最后一个小错误：

Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.

不要使用 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 || '';
  },
  ...
}
...

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

希望对您有所帮助。

V-Model 不会更新

V-Model won't update

search

vue.js

vue-component

vuejs2

v-model

Student.js

HTML