Vue v-model 绑定到父组件输入元素不起作用

Question

我正在使用 Vue、Nuxt、Vue Good Table 实时搜索 table。我创建了一个名为 child.vue 的子组件，并将其导入到父页面 parent.vue。我使用 v-model 将 searchTerm 绑定到父组件中的 input 元素上。当我运行它时，实时搜索不起作用。我从控制台收到警告。 Property or method "searchTerm" is not defined on the instance but referenced during render. 你能帮帮我吗？我是 Vue.js 的新手。谢谢

对于child.vue

<template>
<vue-good-table
    :columns="columns"
    :rows="rows"
    :search-options="{
      enabled: true,
      externalQuery: searchTerm
    }"
    :sort-options="{
      enabled: false,
    }"
    :group-options="{
      enabled: true, 
    }"
  />
</template>
<script>
export default {
    name: 'my-component',
    data() {
        return {
            searchTerm: '',
            columns: [xxxx]
        }
    }
}
</script>

对于parent.vue

<template>
  <div>
    <input type="text" placeholder="Live Search" v-model="searchTerm" />
  </div>
  <div>
    <child />
  </div>
</template>

Answer 1

将 parent 中的 prop 传递给 child，并在 parent 中定义 searchTerm data

<template>
...
  <input type="text" placeholder="Live Search" v-model="searchTerm" />
  <child :searchTerm="searchTerm" />
...
</template>
<script>
  data(){
    return {
      searchTerm: ''
    }
  }
...
</script>

在 child 中定义道具，并在 child 中删除 searchTerm data

<script>
export default {
  ...
  props: ['searchTerm'],
  ...
  data(){
    return {
      //searchTerm: '' <- remove this from child
    }
  }
   ...
}
</script>

您现在可以在 child 后访问 searchTerm <template> 或 child 后 this.$props.searchTerm <script>

Vue v-model 绑定到父组件输入元素不起作用

Vue v-model bind to Parent component input element doesn't work

vue.js

vuejs2

nuxt.js

vue-good-table