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

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

标签： javascripthtmlvue.jsvuejs2

Answer 1

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

为此，您需要维护每个条目的可见性状态。

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

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

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

这个对象可以通过使用watcher与 prop 数据保持同步。

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

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>