Как показать / скрыть динамически добавленный элемент span по клику с помощью vuejs?

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

Если я правильно понимаю, у вас есть поступающие данные, которые представляют собой массив чисел или массивов, и вы хотите иметь возможность индивидуально переключать каждый массив.

Для этого вам понадобитсяподдерживать состояние видимость для каждой записи.

Это можно сделать с помощью простого объекта, который выглядит следующим образом ...

{
  "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>