时间戳

首页 > 解决方案 > Vue v-model绑定到父组件输入元素不起作用

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

问题描述

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

为了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>

标签： vue.jsvuejs2nuxt.jsvue-good-table

解决方案

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

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

在 child 中定义 prop，并searchTerm在 childs中删除data

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

您现在可以searchTerm在孩子<template>或this.$props.searchTerm孩子中访问<script>

推荐阅读