Why does the v-bind shortcut : cannot be used for this property in this bootstrap-vue table?

user_3848207 0
Viewed 76

I refer to this stackoverflow answer.

How to remove (Click to sort Ascending) text from header of every column in this bootstrap-vue table?

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

bootstrap-vue vue.js javascript
1 Answers

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

user_167581370
Related