Блог

Главная - Вопросы по программированию - Vue.js компонент вызывает метод внутри свойства данных

Vue.js компонент вызывает метод внутри свойства данных

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

Я хотел бы назначить компонентные методы переменным данных, см. Пример кода ниже. К сожалению, это не работает, как правильно?

 <li v-for="item in items" @click="item.action">
    {{ item.title }}
</li>
  
 export default {
    data: () => ({
        items: [
            { title: "One", action: this.funcOne },
            { title: "Two", action: this.funcTwo },
        ]
    }),
    methods: {
        funcOne() {
            alert("Hi")
        },
        funcTwo() {
            alert("Hello")
        }
    }
}

Ответ №1:

Попробуйте передать экземпляр vue ( this ) в качестве параметра функции data data: (vm) => , а затем используйте его action: vm.funcOne 

 Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
      data: (vm) => ({ // vm the component instance this
        items: [
            { title: "One", action: vm.funcOne},
            { title: "Two", action: vm.funcTwo },
        ]
    }),
    methods: {
        funcOne() {
            alert("Hi")
        },
        funcTwo() {
            alert("Hello")
        }
    }
  })  
 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
<li v-for="item in items" @click="item.action">
    {{ item.title }}
</li>
</div>