I refer to this stackoverflow answer.
The correct answer is below;
<b-table
⋮
label-sort-asc=""
label-sort-desc=""
label-sort-clear=""
></b-table>
I add the v-bind shortcut : to the properties as below;
<b-table
⋮
:label-sort-asc=""
:label-sort-desc=""
:label-sort-clear=""
></b-table>
With the : in front, there is no effect. For other properties, adding : is fine. I am confused why some properties need : and some others like hover, striped don't. How to know when I can use :?
I am using vue v2.6 and bootstrap-vue
The colon is a shorthand syntax of v-bind directive and it's used for dynamically binding attributes/props to expressions.
So in short, in case the item you're trying to bind will not change and it is not a prop you're trying to pass downwards, it is useless.
If it is intended to be dynamic, you need some logic to control it or else it will do nothing.
v-bind documentation