вызов функции внутри свойства data () - PullRequest
Новая
       28

вызов функции внутри свойства data ()

0 голосов
/ 11 апреля 2019

Я пытаюсь получить некоторые данные для моего дерева поиска, и я не могу получить данные напрямую из axios или вызвать функцию, потому что не может найти это. 

export default {
 name: 'SideNavMenu',
 data () {
  return {
      searchValue: '',
      treeData: this.getData(),
      treeOptions: {

        fetchData(node) {
          this.onNodeSelected(node)

        }
      },
  }
},

В data () у меня есть treeOptions, где я хочу вызвать функцию onNodeSelected.Сообщение об ошибке:

«Ошибка типа: this.onNodeSelected не является функцией»

Кто-нибудь может помочь?

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Вы не вызываете функцию и ничего не возвращаете из нее. Возможно, вы пытаетесь это сделать? 

export default {
 name: 'SideNavMenu',
 data () {
  return {
      searchValue: '',
      treeData: this.getData(),
      treeOptions: fetchData(node) {
          return this.onNodeSelected(node)
      },
  }
},

Несмотря на это, не рекомендуется помещать функции в свойства данных. Попробуйте сначала объявить переменные с пустыми значениями, а затем установить их, когда вы получите данные внутри beforeCreate, созданных или смонтированных хуков, например: 

export default {
  name: 'SideNavMenu',
  data () {
    return {
      searchValue: '',
      treeData: [],
      treeOptions: {},
    }
  },
  methods: {
    getData(){
      // get data here
    },
    fetchData(node){
       this.onNodeSelected(node).then(options => this.treeOptions = options)
    }
  },
  mounted(){
     this.getData().then(data => this.treeData = data)
  }
},

Или, если вы используете асинхронное ожидание: 

export default {
  name: 'SideNavMenu',
  data () {
    return {
      searchValue: '',
      treeData: [],
      treeOptions: {},
    }
  },
  methods: {
    getData(){
      // get data here
    },
    async fetchData(node){
       this.treeOptions = await this.onNodeSelected(node) 
    }
  },
  async mounted(){
     this.treeData = await this.getData()
  }
},
0 голосов
/ 11 апреля 2019

При использовании this вы пытаетесь вызвать участника для текущего объекта.

В JavaScript использование {} фактически создает собственный новый объект и, следовательно, либо объект должен реализовать onNodeSelected, либо вам нужно вызвать другую функцию, которая позволит вам вызывать его для объекта который реализует функцию. 

export default {
    name: 'SideNavMenu',
    data () {
        return {
            searchValue: '',
            treeData: this.getData(), // <--- This
            treeOptions: {

            fetchData(node) {
                this.onNodeSelected(node) // <--- and this
            }
        },
    }
},


//are calling functions in this object :
{
    searchValue: '',
    treeData: this.getData(),
    treeOptions: {
    fetchData(node) {
        this.onNodeSelected(node)
    }
},
//instead of the object you probably are thinking

Я бы избегал создания блоков объектов внутри блоков объектов, таких как блоки, так как код быстро становится нечитаемым, и при необходимости создаю функции внутри одного объекта.

Полагаю, у вас появилось бы то же сообщение об ошибке, если бы вы попытались также получить значение из treeData

...