Question

我想显示一系列这样的项目：

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

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

我的问题是我要动态添加此数组，因此代码本身不能有像isHidden这样的变量。

我正在像这样添加数组：

let arr_shown = `<span class="toggle">[${myArrayString}]</span>`;
let arr_hidden = `<span class="toggle">[...]</span>`;

和html中的

<span v-html="arr_shown"></span> <!-- or arr_hidden -->

我正在为项目使用vuejs2。如何在点击时在arr_shown和arr_hidden之间切换？

编辑

我有这样的prop：

props: ['arrays']

我有一个computed值，如下所示：

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

我在html中使用的是这样的

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

更新

如果我将不同对象的数组传递给prop arrays怎么办，例如：

:arrays="[1, 2, [1, 2, 3], 3]"

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

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 */
    }
}

Answer 1

如果我正确理解这一点，那么您输入的数据就是一个数字数组或数组，并且您希望能够分别切换每个数组。

为此，您需要为每个条目保持 visibility 状态。

这可以使用看起来像这样的普通对象来完成...

{
  "0": true,
  "1": false,
  // etc
}

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

可以使用watcher使该对象与道具数据保持同步。

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

Vue.component('ArrayTable', {
  template: `<table border="1">
    <tr v-for="(item, index) in formattedArray">
      <td>
        <span v-if="item.isToggleable" @click="toggle(index)" class="toggle">
          [{{ toggles[index] ? item.data : '...' }}]
        </span>
        <span v-else>{{ item.data }}</span>
      </td>
    </tr>
  </table>`,
  props: ['arrays'],
  data: () => ({ toggles: {} }),
  computed: {
    formattedArray () {
      return this.arrays.map((data, index) => {
        let isArray = Array.isArray(data)
        return {
          isToggleable: isArray,
          data: isArray ? data.join(', ') : data
        }
      })
    }
  },
  methods: {
    toggle (index) {
      this.toggles[index] = !this.toggles[index]
    }
  },
  watch: {
    arrays: {
      immediate: true,
      handler (arrays) {
        // watch for changes to the "arrays" prop and initialise the filter
        this.toggles = arrays.reduce((obj, _, index) =>
          (obj[index] = false, obj), {})
      }
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({ myArrays: [] }),
  created () {
    // simulate dynamic loading
    setTimeout(() => {
      this.myArrays = [
        1,
        2,
        [1, 2, 3],
        3
      ]
    }, 500)
  }
})

.toggle { cursor: pointer; }
table { min-width: 8rem; }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <array-table :arrays="myArrays"></array-table>
</div>

如何使用vuejs显示/隐藏动态添加的跨度项目onclick？

编辑

更新

1 个答案: