VueJS v-if I have a question.

I have a question about v-if because there is a blockage.

<ol class="fileNames" style="list-style: none; padding-left:0px;">
                    <li v-for="(fileName, index) in fileNames">
                        <div v-if="fileUploadedCheck(index)" class="p-3 mb-2 bg-success text-dark">
                            <span>[[ fileName ]]</span>
                        </div> 
                        <div v-else class="p-3 mb-2 bg-light text-dark">
                            <span>[[ fileName ]]</span>
                            <button type="button" class="close" aria-label="Close">
                                <span aria-hidden="true" v-on:click="remove_todo(index)">&times;</span>
                            </button>
                        </div>
                    </li>
</ol>

Methods part

fileUploadCheck : function(index){
                    return this.fileUploadedCheckList[index];
                },

The fileuploadedchecklist index key in the fileuploadcheck function on the third line If value is true, the html code represents the bootstrap style for the v-if class.

At first, the file has not been uploaded, so I understand that v-else is being implemented Even after uploading and changing the index value of the file uploaded checklist to true, the v-else I feel difficult in maintaining my style. How can I check the changed list value in real time and change the style?

vue

2022-09-21 11:52

1 Answers

Changing the array element to object will work as intended.

In your code, fileUploadedCheckList probably has the following structure.

fileUploadedCheckList: [
    false,
    false,
    false,
    false,
    false,
    ...
]

After changing this to the structure as below

fileUploadedCheckList: [
    { { isUploaded: false },
    { { isUploaded: false },
    { { isUploaded: false },
    { { isUploaded: false },
    { { isUploaded: false },
    ...
]

rendering care of it in like this.

<li v-for="(check, index) in fileUploadedCheckList" :key="index">
    <div v-if="check.isUploaded">Hello!</div>
</li>

2022-09-21 11:52

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656