从Vue

Question

我陷入了对Vue的误用，我有一个＆＃34;列表＆＃34;从ajax获取结果的组件，当我想添加搜索字段时出现问题，我有这样的事情：

search.vue

<template>
  <div>
    <div v-for="(result, index) in results">
      <h2>{{ result.name }}</h2>
    </div>
  </div>
</template>

<script>
  export default {
    name : 'searchList',

    data() {
      return { results: [] }
    }

    created: function(){
      this.goSearch();
    },

    methods : {
      goSearch : function(){
        this.results = axios.get('/search');
      }
    }
  }
</script>

这就像一个魅力，重点是我想为搜索添加一个输入，我做了一些研究，我发现获得这个的唯一方法是使用另一个组件，但是我不想仅为输入创建另一个组件，所以我想做类似的事情：

的index.html

<input type="text" v-model="goSearch">

<search-list></search-list>

但我面临的问题是Vue正在返回一个错误：

[Vue warn]: Property or method "goSearch" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我也曾尝试使用v-bind="goSearch"，但也无法工作。有什么想法来实现这个目标吗？

更新 我已经创建了一个按钮来调用该函数：

<button @click="goSearch"></button>

功能＆＃34; goSearch＆＃34;现在尝试从文本框中获取值，但这也不起作用。

Answer 1

您因使用以下原因而收到此类错误：

<input type="text" v-model="goSearch">

此处，goSearch为data，vue找不到此数据。但你的意思是它是一种方法。 Vue没有这样的工作。如果要绑定其中的某些方法，则不需要使用v-model。但是你需要绑定v-on:input

<input type="text" v-on:input="goSearch">

Answer 2

问题是goSearch方法是在searchList组件中定义的，其外的任何东西都不知道它是什么（在这种情况下，输入元素），因此警告。

解决方案是在父组件中定义方法（在这种情况下，看起来像是它的index.html），因此所有子组件都可以访问它。

您还必须将results数组存储在父data内，然后使用props和goSearch函数将其发送到searchList组件，如下所示：

<强> search.vue

<template>
    <div>
        <div v-for="(result, index) in results" v-bind:key="index">
            <h2>{{ result.title }}</h2>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'searchList',
    props: ['results'],
    created: function () {
      this.$emit('goSearch')
    }
  }
</script>

父组件：

<template>
  <div id="app">
    <button v-on:click="goSearch">Get Random Post</button>
    <search-list
            v-on:goSearch="goSearch"
            v-bind:results="results"
    ></search-list>
  </div>
</template>

<script>
import searchList from './components/searchList'

export default {
  name: 'App',
  data () {
    return { results: [] }
  },
  components: {
    searchList
  },
  methods: {
    goSearch: function () {
      const postId = Math.floor(Math.random() * (100 - 1 + 1)) + 1
      fetch('https://jsonplaceholder.typicode.com/posts/' + postId)
        .then(response => response.json())
        .then(json => {
          this.results = [json]
        })
    }
  }
}
</script>

请记住，如果多个组件使用属性/方法，则需要在父组件中定义它，然后使用props将该信息发送到子组件，子项可以触发事件父母使用emit。

另外，请查看this answer。