How to use data variable inside another data variable vuejs

Question

I'm trying to use data variable inside another data variable, but when I console it shows undefined. I'm trying to switch checkbox with setting data value true and false. My code is below,

data() {
        return {
            roleCreate:true,
            rows:[
              {
              id:1,
              type:0,
              create: `<label class="switch switch-primary mr-3">
                                <input type="checkbox"  ${this.roleCreate && 'checked'}>
                                <span class="slider"></span>
                            </label>`,
              }
            ]
       }
}

How can I do this?

why would you want to use a data variable instead of a normal template or a computed property? — thks173
– thks173, Commented Jul 2, 2020 at 8:25
@thks173 Sorry I didn't know how to use it, I'm new to vuejs. How can I do it? — Udara Herath
– Udara Herath, Commented Jul 2, 2020 at 8:28

Kuldeep Bhimte · Accepted Answer · 2020-07-02 09:01:13Z

1

I suppose that the rows property is not dynamic.

The HTML code belongs to the template and the javascript code belongs to the script.

Try to be modularized your code.

If rows is a dynamic property you can use v-for

data() {
    return {
        roleCreate:true
   }
}

<label class="switch switch-primary mr-3">
    <input v-if="roleCreate" type="checkbox">
    <span class="slider"></span>
  </label>

answered Jul 2, 2020 at 9:01

Kuldeep Bhimte

9591 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use data variable inside another data variable vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related