How to set component property programmatically in Vuetify component

Question

I have a checkbox component defined like so:

let checkbox = this.$createElement(VCheckbox, {
    props: {
        hideDetails: true
    }
});

In my code I can get a reference to this component. In other words I have access to this checkbox variable. What I want is to set property programmatically. By property I mean this part of the component:

props: {
    hideDetails: true
}

What I want is to set indeterminate to true. Something like:

checkbox.setProperty('indeterminate', true);

But I'm unable to find in documenation anything related to my problem. So, how can I implement this?

So why you don't create a dynamic variable in data ? `hideDetails: this.state` — John, Apr 18 '19 at 12:52
Are you trying to use $createElement to build a Vue component or are u using it inside an existing component? All $createElement does is create DOM elements, not Vue components. Meaning, you can't add Vue properties to regular DOM elements.. [Here](https://codepen.io/dchanis/pen/XEBVXg?editors=1010) ([taken from here](https://medium.com/@dillonchanis/leveraging-render-props-in-vue-7eb9a19c262d)) is an example of render functions, and [here](https://stackoverflow.com/questions/51502183/vuejs-createelement-insert-dynamic-html) is an example of adding DOM props using $createElement. — Matt Oestreich, Apr 18 '19 at 15:50
@Jacobian you solved with my way ? if yes I have to make a answer to close this question — John, Apr 18 '19 at 16:43
@Jacobian then a render function is what you're after. Look into functional components. — Matt Oestreich, Apr 18 '19 at 16:55

score 4 · Accepted Answer · answered Apr 19 '19 at 07:46

You can create a dynamic variable in your data scope :

data: function() {
  return {
    stateDetails: true
  };
}

Then use it in your props :

props: {
  hideDetails: this.stateDetails
}

And now you can change the value like that :

this.stateDetails = true / false

Abdulla Thanseeh · Answer 2 · 2019-04-18T13:07:49.733

1

You could try

let checkbox = this.$createElement(VCheckbox, {
    ref:"refToElement",
    props: {
        hideDetails: true
    }
});
    this.$refs.refToElement.$el.setProperty('indeterminate', true);

edited Apr 18 '19 at 13:07

answered Apr 18 '19 at 12:34

Abdulla Thanseeh

9,438
3
11
17

I do not want to use a template. Therefore, I clearly said how this component is created in my code. It is created by `this.$createElement`. And I need to set property on the fly, otherwise, I would just have another `props` inside `this.$createElement` statement – Jacobian Apr 18 '19 at 12:36
Basically, I need to know if there is something similar to `setProperty` method – Jacobian Apr 18 '19 at 12:38
checkbox.$el.setProperty('indeterminate', true); – Abdulla Thanseeh Apr 18 '19 at 12:41
It is not working. And by the way, you are trying to set a property of DOM element. It is not right. – Jacobian Apr 18 '19 at 12:47
can you try once again with ref – Abdulla Thanseeh Apr 18 '19 at 13:10

How to set component property programmatically in Vuetify component

2 Answers2