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

Answer 1

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;
  }
}