CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-vue
Dirk Schumacher
Dirk Schumacher

Reputation: 1655

Vue.js - Display boolean value of list item in input field

In short I have an array of data delivered by a backend where value may be strings, numbers or booleans. These datas ought to be displayed in textfields.
I am using bootstrap-vue's <b-input ... /> for the input field.
It works with boolean but the browser announces a warning:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Boolean with value true.

How to solve that, not to see the warning? - I figured that there must be some kind of conversation between the raw data and the filling of the input field.

Here is my HTML:

<b-container>
  <b-row v-for="(value,idx) in this.tags" :key="idx">
    <b-col><b-input v-model="tags[idx].tag" placeholder="key" size="sm" /></b-col>
    <b-col><b-input v-model="tags[idx].value" placeholder="value" size="sm"/></b-col>         
  </b-row>
...

Here's the relevant javascripts parts:

...
data() {
    return {
       ...
        tags: [ 
            {tag: 'ONE', value: 12345},
            {tag: 'TWO', value: true},
            {tag: 'THREE', value: 'some text'},
        ]
    };
},
...

When it comes to display/render the tags tag='TWO', value=true the above mentioned warning is issued in the browser's console.
I guess there must be some kind of (back and forward) conversation between data model (tags[x].value) and display in the b-input. But I have not idea how to do that and I did not find a good clue in any docs or posts...
Thanks for your help :-)

PS: in the initial question I mistakenly pasted a wrong browser message:
[Vue warn]: Invalid prop: type check failed for prop "readonly". Expected Boolean, got String with value "true".
I did correct the issue in the question.

Upvotes: 1

Views: 1685

Answers (1)

tony19
tony19

Reputation: 138486

In HTML, Boolean props are true just by the presence of the attribute, so just do:

<b-input readonly>

If you prefer to see true in markup, use a data binding:

<b-input :readonly="true">
         👆

Upvotes: 4

Related Questions