Vue 使用计算属性返回过滤后的列表，类型错误？？

ing 发表于 2020-6-17 09:53

本帖最后由 ing 于 2020-6-17 10:03 编辑

参考https://vuejs.bootcss.com/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81

<!DOCTYPE html>
<html>
   <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
   </head>

   <body>
            <div id = "app">
                     <ol>
                           <li v-for="item in activeItems"
                                    :key="item.id"
                           >
                                    {{item.info}}
                           </li>
                     </ol>
            </div>

            <script type="text/javascript">
                     var datas = {
                           item:{
                                    id:1,
                                    info:"foo",
                                    status:true
                           },
                           item:{
                                    id:2,
                                    info:"bar",
                                    status:false
                           }
                     };

                     var vm = new Vue({
                           el:'#app',
                           data:datas,
                           computed:{
                                    activeItems:function(){
                                             return this.$data.item.filter(function(item){
                                                   return item.status
                                             })
                                    }
                           }
                     });

            </script>
   </body>

</html>

XXXXXMY 发表于 2020-6-17 10:03

filter()方法是针对于数组Array的，你的data是个对象阿
https://www.runoob.com/jsref/jsref-filter.html

ing 发表于 2020-6-17 10:04

data的数据格式写错了，应该改成这样
items:[
{
id:1,
info:"foo",
status:true,
},
{
id:2,
info:"bar",
status:false,
}
]

linguo2625469 发表于 2020-6-17 10:16

首先data定义错误才会报错
正确代码：
<script type="text/javascript">
   var datas = {
         item:[
            {
               id: 1,
               info: "foo",
               status: true
            },
            {
               id: 2,
               info: "bar",
               status: false
            },
         ]
   }
   var vm = new Vue({
         el: '#app',
         data: datas,
         computed: {
            activeItems: function () {
               return this.$data.item.filter(function (item) {
                     return item.status
               })
            }
         }
   });
</script>

打工仔-知恩 发表于 2020-6-17 11:17

js数组掌握不过关就要停下来先掌握了再去学框架虽然都说vue简单好入门但是该掌握的还是必须掌握不然你学框架思路也会受限实现的方法就会单一或者没有解决问题的方法

页: [1]

吾爱破解 - 52pojie.cn's Archiver

Vue 使用计算属性返回过滤后的列表，类型错误？？