关于JS中的一个[Vue warn] Property “xxx“ was accessed during render but is not defined on instance 小问题

最新推荐文章于 2024-07-12 16:27:40 发布

2401_84435942

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量382

点赞数 6

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/2401_84435942/article/details/138238710

版权

    <form action="" >
        <table>
            <tr v-for="student in studentList">
                <td v-if="student.age >=18">                
                        <span class="span1">{{student.name}}</span>
                        {{student.age}}                                  
                </td>
                <td v-else>
                    <span class="span2">{{student.name}}</span>
                    {{student.age}}
                </td>
            </tr>
        </table>
    </form>

但唯独在第一个错误例子中用上form时报错了？

实际上慢慢去对比与剖析发现，在第一个例子中我使用了form的标签，但是里面却没有table标签，同时input标签也不在标签里面。

我没有翻底层源码，不过个人猜测估计是封装底层的时候要把信息给封在

组合的

之类的标签里才行，不然算不上一个表格，他们应该是整体的，不可划分的。

如果有空还是得看看底层…

所以正确的代码应该是加了

和

的。即：

<form action="" >
            <table>
            <tr v-for="tdl in todoList" :key="tdl.id">           
                   <td>{{tdl.title}} </td>  
                   <td>{{tdl.completed}}</td>               
                   <td><input type="checkbox" v-model="tdl.completed" @click="changeCompleted(tdl)"></td>
            </tr>
            </table>
</form>

这时候就可以正确显示了：

不过值得注意的是如果

里有的话也是需要包含在

标签里的，不然会报错…嗐，也不知道el-element是不是也这样，我得去试试…

例如:

                       
                   <td>{{tdl.title}} </td>  
                   <td>{{tdl.completed}}</td>               
                   <input type="checkbox" v-model="tdl.completed" @click="changeCompleted(tdl)">

至此，问题解决：

以下是小练习里的所有代码，个人记录，可供参考------

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>5.10</title>
<style >

    .span1{
        
        font-weight: bold;
    }


</style>

</head>

<body>

    
<div id="app">


    <!-- 有一个名为 `fruitList` 的数组，数组包含多个水果名称。请使用 `v-for` 循环渲染出
    一个无序列表（`ul` 标签），列表中包含数组中所有水果的名称。
    例如，如果 `fruitList` 数组为 `['苹果', '香蕉', '橙子', '草莓']`，则渲染出来 -->

        <ul>
            <li  v-for="item in items" >{{item.message}}</li>
            <li  v-for="item in fruitList1" >{{item.name}}</li>

            

            <li v-for="item1 in fruitList2">
                
                <span v-for="item2 in item1 ">
                     name={{item2.name}}, price={{item2.price}}
                </span>

            </li>

            
            <!-- [Vue warn]: Property "todo" was accessed during render but is not defined on instance. at <App> -->
            <li  v-for="todo in todos" >         
                <span v-if="todo.isComplete">
                    {{todo.name}}
                </span>              
            </li>
            
              
        </ul>

            <div>
                <!-- 
                    methods事件为addTodoAllItem 
                    v-model好像只能用于input标签下
                    [Vue warn]: Template compilation error: v-model can only be used on <input>, <textarea> and <select> element
                -->
                    <button @click="addTodoAllItem">add</button>   
                    <ul>
                        <li v-for="todoItem in todosAll" :key="todoItem.id">
                            {{todoItem.text}}
                            <input type="button"  value="delete" @click="deleteTodoSingleItem(todoItem.id)">
                        </li>
                    </ul>
                     
            </div>

<!-- 
    有一个名为 `studentList` 的数组，数组包含多个学生对象，
    每个学生对象包含 `name` 和 `age` 两个属性。请使用 `v-for` 循环渲染出一个表格，
    表格中包含数组中所有学生的姓名和年龄信息。同时，如果某个学生的年龄大于等于 18 岁，则将该学生的姓名显示为粗体。

例如，如果 `studentList` 数组为 `[{name: '小明', age: 16}, {name: '小红', age: 20}, {name: '小刚', age: 17}, {name: '小芳', age: 19}]` 
-->
    <form action="" >
        <table>
            <tr v-for="student in studentList">
                <td v-if="student.age >=18">                
                        <span class="span1">{{student.name}}</span>
                        {{student.age}}                                  
                </td>
                <td v-else>
                    <span class="span2">{{student.name}}</span>
                    {{student.age}}
                </td>
            </tr>
        </table>
    </form>

<!-- 
有一个名为 `todoList` 的数组，数组包含多个待办事项对象，
每个待办事项对象包含 `id`、`title`、`completed` 三个属性。
请使用 `v-for` 循环渲染出一个待办事项列表，列表中包含数组中所有待办事项的标题和完成状态。
同时，为每个待办事项渲染一个复选框，当用户点击复选框时，应该触发一个事件，将该待办事项的 `completed` 属性取反。 

例如，如果 `todoList` 数组为 `[{id: 1, title: '买牛奶', completed: false}, {id: 2, title: '做作业', completed: true}, {id: 3, title: '打篮球', completed: false}]`
-->


    
        <form action="" >
            <table>
            <tr v-for="tdl in todoList" :key="tdl.id">           
                   <td>{{tdl.title}} </td>  
                   <td>{{tdl.completed}}</td>               
                   <td><input type="checkbox" v-model="tdl.completed" @click="changeCompleted(tdl)"></td>
            </tr>
            </table>
        </form>
    

       





</div>






<script type="module">


    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

                let id=0
    createApp({

        

        data(){
            return {
                
                items : [{message : '111'},{message : '222'},{message : '333'},{message : '444'}],
                fruitList1:[{name : '苹果'},{name : '菠萝'},{name : '香蕉'},{name : '榴莲'}],
                fruitList2:[[{name : '苹果',price : '0'},{name : '菠萝',price : '5'},{name : '香蕉',price : '10'},{name : '榴莲',price : '20'}]],
                todos:[
                    {name :'1',isComplete: true},
                    {name :'2',isComplete: true},
                    {name :'3',isComplete: false},
                    {name :'4',isComplete: true}
                ],

                newTodo :'',
                todosAll :[
                    {id : id++,text : 'Learn1'},
                    {id : id++,text : 'Learn2'},
                    {id : id++,text : 'Learn3'},
                    {id : id++,text : 'Learn4'}
                ],
**ES6**

*   列举常用的ES6特性：

*   箭头函数需要注意哪些地方？

*   let、const、var

*   拓展：var方式定义的变量有什么样的bug？

*   Set数据结构

*   拓展：数组去重的方法

*   箭头函数this的指向。

*   手写ES6 class继承。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)



**微信小程序**

*   简单描述一下微信小程序的相关文件类型?

*   你是怎么封装微信小程序的数据请求？

*   有哪些参数传值的方法？

*   你使用过哪些方法，来提高微信小程序的应用速度？

*   小程序和原生App哪个好？

*   简述微信小程序原理？

*   分析微信小程序的优劣势

*   怎么解决小程序的异步请求问题？



![](https://img-blog.csdnimg.cn/img_convert/60b1dbe5c76e264468aa993416a9a031.png)



**其他知识点面试**

*   webpack的原理

*   webpack的loader和plugin的区别？

*   怎么使用webpack对项目进行优化?

*   防抖、节流

*   浏览器的缓存机制

*   描述一下二叉树, 并说明二叉树的几种遍历方式?

*   项目类问题

*   笔试编程题：



![](https://img-blog.csdnimg.cn/img_convert/aec12fc95e5722b9f2f1f22eeb5e67bd.png)



#### 最后



技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

2401_84435942

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
关于JS中的一个[Vue warn] Property “xxx“ was accessed during render but is not defined on instance 小问题

实际上慢慢去对比与剖析发现，在第一个例子中我使用了form的标签，但是里面却没有table标签，同时input标签也不在标签里面。我没有翻底层源码，不过个人猜测估计是封装底层的时候要把信息给封在。以下是小练习里的所有代码，个人记录，可供参考------但唯独在第一个错误例子中用上form时报错了？如果有空还是得看看底层…所以正确的代码应该是加了。里有的话也是需要包含在。不过值得注意的是如果。
复制链接

扫一扫