Is possible to put html element inside variable in Vue.js?

Question

i have some issue with Vue.js. In my Component i got other component by ref and i need change some of his properties from pure text to inputs with predefined text.

My method looks like this:

 addCustomItem(event){      
                let grid = this.$refs.customItemGrid.items;
                //Grid alredy have 2 items with amount property

                //this is what i need to do... (Now amount is just value (f.e. 42)
                grid[0].amount = <b-form-select>  grid[0].amount <b-form-select>;
                //but i can't pass tag to variable like this.
            }

//Množství means amount in my lang. Final Grid

Are you using a library for your grid? Most libraries provide some sort of scoped slot templating for this kind of thing. — skirtle
– skirtle, Commented Jul 3, 2019 at 9:39
Would that be helpful -> stackoverflow.com/a/54618473/6385184 — Roland
– Roland, Commented Jul 3, 2019 at 9:54
Grid is in Custom component and it use b-table in his template something like this: <b-table striped hover :busy="isBusy" :fields="fields" :items="items" :show- empty="true" :empty-text="'Nebyly nalezeny žádné záznamy'" ></btable> . So i am not sure if is it possible to change just some fields to inputs... — Young L.
– Young L., Commented Jul 3, 2019 at 10:12

Krzysiek W · Accepted Answer · 2019-07-03 09:48:29Z

2

It is not possible, because it is not html code, but component. You can pass html via in v-html directive, but it won't work for components.

Possible solution.

In template:

<b-form-select v-if="grid[0]">{{grid[0]}}<b-form-select>

in script:

data: {
  return {
    grid: []
  }
},
methods: {
  addCustomItem (event) {      
    this.grid = this.$refs.customItemGrid.items;
  }
}

answered Jul 3, 2019 at 9:48

Krzysiek W

4053 silver badges10 bronze badges

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

2 Comments

Young L. Over a year ago

Thx for your response but there is problem becouse in Grid compoment template is used <b-table> so i have no idea how to use v-if on just some cols from <b-table>

Krzysiek W Over a year ago

Check this out: bootstrap-vue.js.org/docs/components/table/#formatter-callback

Collectives™ on Stack Overflow

Is possible to put html element inside variable in Vue.js?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related