How to pass parameter to props function in VUE?

M

Maxim Zolotoy2019-04-17 08:56:59

Vue.js

Maxim Zolotoy, 2019-04-17 08:56:59

There is such a code

<button-ui :classes="['details-button', 'secondary']" title="Описание"
                   :click-handler="openModal"></button-ui>

openModal function defined in VUE component

const app = new Vue({
  el: '#app',
  store,
  methods: {
    openModal(value) {
      console.log(value);
    }
  },
});

How can I pass some parameter with a string so that it would be displayed in console.log in this example?
In theory, I thought something like this - but it does not work

<button-ui :classes="['details-button', 'secondary']" title="Описание"
                   :click-handler="openModal('test')"></button-ui>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

M

Maxim Zolotoy, 2019-04-17
@spacenear

I came up with a solution myself - you can pass an array of arguments to neighboring props and inside the component, use the spread operator to expand them into function arguments.

D

Dmitry Gololobov, 2019-04-17
@dGololobov

Try like this:

<button-ui :classes="['details-button', 'secondary']" title="Описание"
                   @click="openModal('test')"></button-ui>

E

Ekaterina Mikhailova, 2019-04-17
@katyamishha

I don’t know, I even output everything to the console in this vein

<body>
  <div id="app">
    {{ message}}
    <button-ui :classes="['details-button', 'secondary']" title="Описание" :click-handler="openModal('test')">
    </button-ui>
  </div>
  <script>
    Vue.component('button-ui', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button>жми</button>'
    })
    new Vue({
      el: "#app",
      data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
      },
      methods: {
        openModal(value) {
          console.log(value);
        }
      }
    })

  </script>
</body>