if error encounting Vue js project with Laravel-CodePudding

developing Vue js SPA app with laravel back end. but in my vue js file I have following code segments

<tr v-for="(tag, i) in tags" :key="i" v-if="tags.length"> //error is here
                                <td>{{tag.id}}</td>
                                <td >{{tag.tagName}}</td>
                                <td>{{tag.created_at}}</td>
                                <td>
                                    <Button type="info" size="small" @click="showEditModal(tag, i)">Edit</Button>
                                    <Button type="error" size="small" @click="showDeletingModal(tag, i)" :loading="tag.isDeleting">Delete</Button>
                                    
                                </td>
                            </tr>

among them first line of code v-if="tags.length" is indicating red error line here and highlighting following error message in vs-code [vue/no-use-v-if-with-v-for] This 'v-if' should be moved to the wrapper element.eslint-plugin-vue Conditionally renders the element based on the truthy-ness of the expression value.

how could I fix this problem here?

CodePudding user response：

You don't need to check the length, if the length equals 0 then 0 tr elements are rendered. Therefore, if you want to use v-if you should use it on a parent element otherwise the if is redundant.

CodePudding user response：

According to the documentation and the error message you shouldn't use v-if with v-for on the same element.

An alternative would be to wrap stuff around a template tag.

<tr v-if="tags.length == 0">
    <!-- do stuff here -->
</tr>
<tempalte v-else>
    <tr v-for="(tag, i) in tags" :key="i">
        <td>{{tag.id}}</td>
        <td >{{tag.tagName}}</td>
        <td>{{tag.created_at}}</td>
        <td>
             <Button type="info" size="small" @click="showEditModal(tag, i)">Edit</Button>
             <Button type="error" size="small" @click="showDeletingModal(tag, i)" :loading="tag.isDeleting">Delete</Button>
        </td>
    </tr>
</template>

<tempalte v-if="tags.length">
    <tr v-for="(tag, i) in tags" :key="i">
        <td>{{tag.id}}</td>
        <td >{{tag.tagName}}</td>
        <td>{{tag.created_at}}</td>
        <td>
             <Button type="info" size="small" @click="showEditModal(tag, i)">Edit</Button>
             <Button type="error" size="small" @click="showDeletingModal(tag, i)" :loading="tag.isDeleting">Delete</Button>
        </td>
    </tr>
</template>

but if length is 0 you don't need the "if" anyway!