Javascript 控制与Vue中道具项目相关的元素的可见性

对Vue来说，这是一个全新的概念，但仍在努力理解其原理

我正在尝试创建一个自定义组件，该组件接受项目的分层列表，并将它们显示在平面列表中。我希望能够根据单击事件隐藏和显示每个项目。它基本上是一个定制的树组件。我正在努力实现这种行为

我尝试的是创建一个computed属性，将

isVisible

属性添加到每个项，并在模板bind

show

指令中添加到该属性。但这不起作用，因为计算属性不是反应性的，我添加的任何属性都不会被监视

我觉得这应该是非常简单的，我没有得到Vue的基础知识。我能想到的选择是：

1-通过

Vue.set（）

向每个项目添加

isVisible

属性

2-保留数据对象中可见项的列表

实现这一目标的最佳方式是什么

关于第一种方法，我尝试了以下方法，它不会呈现列表中的任何项目，并且我得到了Vue警告：

[Vue warn]: Property or method "isVisible" is not defined on the 
instance but referenced during render. Make sure that this 
property is reactive, either in the data option, or for class- 
based components, by initializing the property. See: 
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive- 
Properties.

<template>
    <table>
        <tr>
            <th v-for="(header,col) in headers" :key="col" >
                <td> {{ header.name }} </td>
            </th>
        </tr>
        <template v-for="item in flat_items">
            <tr v-show="isVisible" v-bind:key="item.id">
                <td v-for="(header,id) in headers" :item="item" :key="header.id">
                    <template v-if="item.children && id==0"> 
                        <v-icon>chevron_right</v-icon> 
                    </template>
                    {{ item[header.value] }}
                </td>
            </tr>
        </template>
    </table>
</template>
<script>
    export default {
    name: 'table-tree',
    props: [
        'items',
        'headers'
    ],
    data: function() {
        return {
            ui_item_props : {
                isVisible: true
            },
        }
    },  
    methods: {
        flatten : function(arr, parent_id) {
            var a = [];
            var arrLength = arr.length;
            for (var i=0;i<arrLength;i++) {
                var children = arr[i].children;
                var item = arr[i]
                a.push({...item, parent:parent_id})
                if(Array.isArray(children)){
                    a = a.concat(this.flatten(children,item.id))
                }
            }
            return a
        },
        addPropsObj : function(obj,props) {
            var k;
            for (k in props){
                this.$set(obj,k,props[k])
            }
        },
        addPropsRec : function(arr, props) {
            var arrLength=arr.length
            for(var i=0;i<arrLength;i++){
                this.addPropsObj(arr[i], props);
                if(Array.isArray(arr[i].children)){
                    this.addPropsRec(arr[i].children, props)
                }
            }
        }
    },
    computed: {
        flat_items : function() {
            return this.flatten(this.items,null)
        }
    },
    mounted: function() {
        this.addPropsRec(this.items,this.ui_item_props)
    }
}
</script>

[Vue warn]：未在上定义属性或方法“isVisible”
实例，但在渲染期间被引用。确保这个
属性是被动的，无论是在数据选项中，还是对于类-
基于组件，通过初始化属性。见：
https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性
财产。
{{header.name}
雪佛龙右
{{item[header.value]}
导出默认值{
名称：'表树'，
道具：[
“项目”，
“标题”
],
数据：函数（）{
返回{
ui_项目_道具：{
可见：正确
},
}
},  
方法：{
展平：函数（arr，父\u id）{
var a=[]；
var arrLength=arr.length；
对于（var i=0；i
[Vue warn]：未在上定义属性或方法“isVisible”
实例，但在渲染期间被引用。请确保此属性
是被动的，无论是在数据选项中，还是对于基于类的
组件，通过初始化属性。请参阅：
财产

此错误是不言自明的，您尚未创建isVisible属性，但正在模板内使用它。

但仅在
数据/计算对象中添加isVisible属性不会解决问题。

您可以做的是为
flat_items
数组中的每个元素添加一个
isVisible
属性，然后在v-show中使用该变量：

<tr v-show="item.isVisible" v-bind:key="item.id">

我建议您为行项目创建一个单独的组件（例如
）。该组件在数据函数中有一个
isVisible
属性，可以通过同一组件中的按钮将其设置为true和false。然后，在主组件中，循环平面项目，并将项目作为道具传递给该组件，如
我以为我完全按照您的建议做了，但我意识到我犯了一个愚蠢的错误f将变量引用为
isVisible
，而不是
item.isVisible
。
 <v-icon @click="manageVisibility(item)">chevron_right</v-icon> 

manageVisibility(item) {
    Vue.set(item, 'isVisible', !item.isVisible);
}