Как использовать функцию на Vue локальном компоненте - PullRequest
Новая
       21

Как использовать функцию на Vue локальном компоненте

1 голос
/ 25 февраля 2020

в моем примере js код: 

new Vue({
  el: '#app',
  data: {
    list: [1,2,3]
  },
  methods: {
    change: function(number) {
      return number === 2 ? 'a' : 'b';
    }
  },
  components: {
    'html-list': {
      props: ['item'],
      template: '<li :title='change(item)'> text </li>'
    }
  }
});

в моем примере html код: 

<ul id='app'>
  <html-list
    v-for:'num in list'
    :item='num'
  ></html-list>
</ul>

Я хочу получить следующий результат: 

<ul id='app'>
  <li title='b'> text </li>
  <li title='a'> text </li>
  <li title='b'> text </li>
</ul>

Но это не работает.

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

Я не хочу использовать глобальные компоненты, потому что существует так много компонентов для создания.

Что я делаю не так?

1 Ответ

0 голосов
/ 25 февраля 2020

Вы пытаетесь использовать функцию change, которая не объявлена ​​в компоненте.

Для этого есть несколько решений:

  1. объявление функции в компоненте 
components: {
  'my-component': {
    props: [...],
    template: '...',
    methods: {
      change: function() {...}
    }
  }
}
если вы хотите использовать функцию из родительского компонента template: '<li :title='$parent.change(item)'> text </li>' Использовать Vuex
...