Javascript 如何使用vuejs在单击时显示/隐藏动态添加的跨项目？

我想显示如下所示的项目数组：

[...] /* onClick --> */ [1, 2, 3]

props: ['arrays']

convertedArrays() {
    let data = []
    for (let array of this.arrays) {
        data.push(`<span class="toggle">[${array.join()}]</span>`)
    }
    return data;
}

<tr v-for="item in convertedArrays">
<td><span v-html="item"></span></td>
</tr>

我的问题是，我正在动态添加这个数组，因此在代码本身中不能有像

ishiden

这样的变量

我添加的数组如下所示：

[...] /* onClick --> */ [1, 2, 3]

props: ['arrays']

convertedArrays() {
    let data = []
    for (let array of this.arrays) {
        data.push(`<span class="toggle">[${array.join()}]</span>`)
    }
    return data;
}

<tr v-for="item in convertedArrays">
<td><span v-html="item"></span></td>
</tr>

让arr_显示=`[${myArrayString}]`；
让arr_hidden=`[…]`；

在html中：

我正在为我的项目使用

vuejs2

。 如何在单击时在显示的

arr_

和隐藏的

arr_

之间切换

编辑 我有一个像这样的

道具

：

[...] /* onClick --> */ [1, 2, 3]

props: ['arrays']

convertedArrays() {
    let data = []
    for (let array of this.arrays) {
        data.push(`<span class="toggle">[${array.join()}]</span>`)
    }
    return data;
}

<tr v-for="item in convertedArrays">
<td><span v-html="item"></span></td>
</tr>

我计算了一个

值，如下所示：

[...] /* onClick --> */ [1, 2, 3]

props: ['arrays']

convertedArrays() {
    let data = []
    for (let array of this.arrays) {
        data.push(`<span class="toggle">[${array.join()}]</span>`)
    }
    return data;
}

<tr v-for="item in convertedArrays">
<td><span v-html="item"></span></td>
</tr>

我不想对数字做任何事情，而是将解决方案应用于数组。示例输出：

1
2
[...] /*or*/ [1, 2, 3]
3

如何做到这一点

我是否应该这样做以了解我正在向其传递项目类型的道具的组件：

:arrays="[1, 2, {type: 'array', value: [1, 2, 3]}, 3]"

在组件中：

for (let item of this.arrays) {
    if (!!item.type) {
        /* array */
    } else {
         /* number */
    }
}

如果我理解正确的话，你有一个由数字或数组组成的数组，你希望能够单独切换每个数组

为此，您需要为每个条目保持可见性状态

这可以使用一个简单的对象来完成，看起来像这样

{
“0”：正确，
“1”：假，
//等
}

其中键是数组索引，值是可见性状态

此对象可以通过使用一个属性来与道具数据保持同步

然后，您可以使用它通过创建格式化数组值的计算属性来控制数据的呈现方式


Vue.component（'ArrayTable'{
模板：`
[{{切换[索引]？item.data:'..'}}]
{{item.data}}
`,
道具：['arrays']，
数据：（）=>（{切换：{}}），
计算：{
格式化数组（）{
返回此.arrays.map（（数据，索引）=>{
设isArray=Array.isArray（数据）
返回{
I:isArray，
数据：isArray？data.join（'，'）：数据
}
})
}
},
方法：{
切换（索引）{
this.toggles[index]=！this.toggles[index]
}
},
观察：{
阵列：{
立即：是的，
处理程序（数组）{
//观察“阵列”属性的变化，并初始化过滤器
this.toggles=arrays.reduce（（obj，j，index）=>
（obj[index]=false，obj），{}）
}
}
}
})
新Vue({
el:“#应用程序”，
数据：（）=>（{myArrays:[]}），
创建（）{
//模拟动载荷
设置超时（（）=>{
this.myArrays=[
1.
2.
[1, 2, 3],
3.
]
}, 500)
}
})
.toggle{cursor:pointer；}
表{最小宽度：8rem；}
如果我理解正确，那么输入的数据是一组数字或数组，您希望能够单独切换每个数组

为此，您需要为每个条目保持可见性状态

这可以使用一个简单的对象来完成，看起来像这样

{
“0”：正确，
“1”：假，
//等
}

其中键是数组索引，值是可见性状态

此对象可以通过使用一个属性来与道具数据保持同步

然后，您可以使用它通过创建格式化数组值的计算属性来控制数据的呈现方式


Vue.component（'ArrayTable'{
模板：`
[{{切换[索引]？item.data:'..'}}]
{{item.data}}
`,
道具：['arrays']，
数据：（）=>（{切换：{}}），
计算：{
格式化数组（）{
返回此.arrays.map（（数据，索引）=>{
设isArray=Array.isArray（数据）
返回{
I:isArray，
数据：isArray？data.join（'，'）：数据
}
})
}
},
方法：{
切换（索引）{
this.toggles[index]=！this.toggles[index]
}
},
观察：{
阵列：{
立即：是的，
处理程序（数组）{
//观察“阵列”属性的变化，并初始化过滤器
this.toggles=arrays.reduce（（obj，j，index）=>
（obj[index]=false，obj），{}）
}
}
}
})
新Vue({
el:“#应用程序”，
数据：（）=>（{myArrays:[]}），
创建（）{
//模拟动载荷
设置超时（（）=>{
this.myArrays=[
1.
2.
[1, 2, 3],
3.
]
}, 500)
}
})
.toggle{cursor:pointer；}
表{最小宽度：8rem；}

“我的问题是，我正在动态添加这个数组，因此我不能在代码本身中使用类似于
isHidden
的变量。”我有一个动态添加的数组列表，所以我不知道它们的编号，因此我不能使用变量抱歉，这仍然不是很清楚。请您举个例子解释一下好吗？谢谢，我已经更新了我的答案，以便与您的应用程序更加匹配。“我的问题是，我正在动态添加此数组，因此代码本身中不能有类似
ishiden
的变量。”我有一个动态添加的数组列表，所以我不知道他们的号码，所以我不能使用变量对不起，这还不是很清楚。请您举个例子解释一下好吗？谢谢，我已经更新了我的答案，使之更符合您的应用程序。谢谢您的回答，但我遇到了另一个问题，如果
道具
数组
包含一些数字和数组，例如
：arrays=“[1,1,2,3,5]”怎么办，我想为阵列实现您的解决方案，但请按原样显示数字。在您的解决方案中编辑什么？如果还没有，我会将它们转换为数组。我已经更新了我的答案事实上，我不想对数字做任何事情，我只想用数组切换行为，所以最终我不认为它们应该转换为数组。这个要求与您的问题有很大的不同。你能更新一下帖子吗谢谢你的回答，b