列表对象键的渲染v错误：值父项为空Vuejs3

wfypjpf4 于 2023-06-30 发布在 Vue.js

关注(0)|答案(2)|浏览(169)

我在vuejs 3中遇到错误
我有这个列表items = ['alimentos', 'licores', 'varios']
生成对象列表

return {
    category: item,
    selected:false
}
});

// render withe v-for in template

<tr v-for="(category,idx) in categories" 
:key="category" 
@click="category.selected = !category selected">
<td>{{ idx + 1 }}</td>
<td class="text-start">{{ category.category }}</td>
<td class="text-success">

<i class="fa-solid fa-minus text-danger" v-if="category.selected"></i>
<i class="fa-solid fa-plus" v-else></i>
<td>
</tr>

//当我点击列表中的一个项目时，在浏览器中我得到错误

[Vue warn]: Unhandled error during execution of scheduler flush.

ERROR
parent is null
insert@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:171:5
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4755:15
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4700:19
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4628:25
patchBlockChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4881:12
patchElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4816:25
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4702:19
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4628:25
patchKeyedChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.j

我已经检查过了，我注意到该项目的选定值确实根据大小写而更改为true或false，但它并没有在浏览器中显示更改
如果我在Vue检查器中更改值，则不会出现错误，并且在显示模板时会显示更改后的值，但如果在模板可见的情况下完成更改，则会抛出错误，我认为问题在于v-for
完全代码组件

<template>
    <div class="row mt-2">
        <h5 class="mt-2">ASISTENTES DE TOMA</h5>
        <div class="col bg-light">
            <div class="row">
                <div class="col-8 mt-2">
                    <input type="text" v-model="query" class="form-control" placeholder="Buscar" @keyup="filterUsers">
                    <table class="table table-bordered table-hover table-condesed mi_table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Nombre</th>
                                <th>Username</th>
                                <th><i class="fas fa-cogs"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(user, idx) in all_teams" :key="user" @click="selectUser(user)">
                                <td class="text-center">{{ idx+1 }}</td>
                                <td class="text-start">{{ user.last_name }} {{ user.first_name }}</td>
                                <td class="text-start">{{ user.username }}</td>
                                <td class="text-success"><i class="fa-solid fa-plus"></i></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-4 mt-2">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Usuarios Seleccionados</h5>
                            <p class="card-text">
                            <ul class="list-group text-start" v-for="user in selected_teams" :key="user.username">
                                <li class="list-group-item p-1" @click="selectUser(user,true)">
                                    <i class="fa-solid fa-minus text-danger"></i>
                                    {{ user.last_name }} {{ user.first_name }}
                                    <small class="badge bg-light text-secondary border">{{ user.username }}</small>
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
            <div class="row mt-3">
                <div class="col text-start">
                    <button class="btn btn-primary btn-sm" @click="showView(2)">
                        <i class="fa-solid fa-chevron-left"></i> Anterior
                    </button>
                </div>
                <div class="col text-end">
                    <button class="btn btn-success btn-sm" @click="showView(4)">
                        Siguiente<i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            <br />
        </div>
    </div>
</template>
<script>
export default {
    name: "TeamsTab",
    emits: ["showView"],
    props: {
        teams: {
            type: Object,
            required: true,
        },
    },data(){
        return{
            query:"",
            all_teams: [],
            selected_teams: [],
        }
    },methods:{
        filterUsers(){
            // tomamos todos los usuarios
        const users = this.teams.map(item=>item);

            // quitamos los seleccionados
        this.all_teams = users.filter(
            item=>!this.selected_teams.includes(item)
         );

         // aplicamos el filtro
         if (this.query.length > 3){
             this.all_teams = this.all_teams.filter((item)=>{
                let params = this.query.toLowerCase();
                let target = item.first_name + ' ' + item.last_name;
                return target.toLowerCase().includes(params);
                }
             );
             return;
         }
         console.log('llgeamos a la fila');
        },
        selectUser(user, delete_usr=false){
            // agregamos un usuario a los seleccionados
           if (delete_usr) {
                this.selected_teams = this.selected_teams.filter(
                    item => item.username !== user.username
                );
                return;
            }
            this.selected_teams.push(user);
            this.filterUsers();
        },showView(view) {
            this.$emit("showView", view);
        },
    },
    mounted(){
        // cargar todos los usuarios asistentes
        this.filterUsers();
    },
};
</script>

vue.js

来源：https://stackoverflow.com/questions/76561279/error-in-render-v-for-list-objects-keyvalue-parent-is-null-vuejs3

2条答案

按热度按时间

zlwx9yxi1#

您有一个错误：

@click="category.selected = !category selected">

应该是

@click="category.selected = !category.selected">

赞(0）回复(0）举报 2023-06-30

xiozqbni2#

问题出在v-if，但我不明白为什么会出现问题，当我不使用v-if时，错误不显示。我认为在进行更改时，变量仍然为null，从而抛出错误
可能解

<template>
    <div class="row mt-2">
                    <h5 class="mt-2">PERSONALIZAR ITEMS TOMA</h5>
                    <div class="col bg-light">
                        <div class="row">
                            <div class="col-6 mt-2">
                                <table class="table table-bordered table-hover table-condesed mi_table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Tipo</th>
                                            <th><i class="fas fa-cogs"></i></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(category,idx) in all_categories" :key="category" @click="category.selected = !category.selected">
                                            <td>{{ idx + 1 }}</td>
                                            <td class="text-start">{{ category.category }}</td>
                                            <td class="text-center">
                                                <span :class="category.selected ? 'text-danger' : 'text-success'">
                                                    {{ category.selected ? 'Quitar' : 'Agregar'  }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>{{ all_categories.length + 1 }}</td>
                                            <td class="text-start">SELECCIONAR PRODUCTOS</td>
                                            <td><i class="fa-solid fa-search"></i></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-6 mt-2">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Items Seleccionados</h5>
                                        <p class="card-text">
                                        <ul class="list-group text-start" v-for="category in selected_categories" :key="category">
                                            <li class="list-group-item p-1"> 
                                                <i class="fa-solid fa-minus text-danger"></i>
                                                {{ category.category }}
                                                <ul v-for="item in category.items" :key="item">
                                                    <li> {{ item }} </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        </p>
                                    </div>
                                </div>
                                <br />
                            </div>
                        </div>
                               <div class="row mt-3">
                                <div class="col text-start">
                                    <button class="btn btn-primary btn-sm" @click="showView(3)">
                                        <i class="fa-solid fa-chevron-left"></i> Anterior
                                    </button>
                                </div>
                                <div class="col text-end">
                                    <button class="btn btn-success btn-sm" @click="showView(5)">
                                        Siguiente<i class="fa-solid fa-chevron-right"></i>
                                    </button>
                            </div>
                            </div>
                            <br/>
                    </div>

                </div>
</template>

<script>
export default {
    name: 'ItemSelectionTab',
    emits: ['showView',],
    props: {
        categories: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            all_categories: [],
        }
    },
    methods: {
        showView(view) {
            this.$emit('showView', view);
        },showView(view) {
            this.$emit("showView", view);
        },filterCategories(){
            // obtenemos todas las categorias

            this.all_categories = this.categories.map((item)=>{
                return  item.type_product.split(";")[0];
            });
            // eliminamos los duplicados
            this.all_categories = [...new Set(this.all_categories)];

            this.all_categories = this.all_categories.map((item)=>{
                let items = this.categories.filter((category)=>{
                    return category.type_product.split(";")[0] == item;
                });

                items = items.map((item)=>{
                     return item.type_product.split(";")[1]
                });

                return {
                    category: item,
                    items: items,
                    selected: false,
                }
            });

            // quitamos las seleccionadas
            this.all_categories = this.all_categories.filter((item)=>{
                return !this.selected_categories.some((category)=>{
                    return category.category == item.category;
                });
            });
        },
    },mounted() {
        this.filterCategories();
    },computed:{
        selected_categories(){
            return this.all_categories.filter((item)=>{
                return item.selected;
            });
        }
    }
}
</script>

赞(0）回复(0）举报 2023-06-30

我来回答

列表对象键的渲染v错误：值父项为空Vuejs3

2条答案

相关问题

热门标签

最新问答