Первоначально скрыть первую группу в повторяемой группе Vue-Formulate

Я использую повторяющиеся группы Vue-Formulate. Для моих требований:

  1. Группу добавлять необязательно
  2. Если для добавления группы нажимается кнопка, то поля в группе должны быть проверены.
  3. Форма не должна изначально отображать группу; он должен показать кнопку для добавления группы

Например, желаемый исходный вид показан на следующем снимке экрана, который я создал после нажатия кнопки "удалить" / X в связанном поле кодов:

Я смоделировал это в codeandbox здесь: Vue Formulate Group с кнопкой для запуска

Это возможно? Если да, то как?

Исследования - Документы Vue-Formulate

В документации Vue-Formulate поinput с участием type="group"реквизита и слотов, естьminimumопора Я установил его на ноль, но это не меняет первоначального вида. Я вижу несколько слотов, но я не совсем уверен, какой из них использовать, и могу ли я использовать любой из них для достижения того, чего хочу; кажется, чтоdefault, grouping, а также repeatable может быть полезно для предотвращения первоначального отображения первой группы.

Исследования - тесты Vue-Formulate

я вижу это FormulateInputGroup.test.js тесты, которые it('repeats the default slot when adding more', Итак defaultслот - это контент, который повторяется. Согласно документам,default слот также получает index в качестве опоры слота, так что это может быть полезно.

Исследования - Vue Debugger

Элемент, который я хочу изначально удалить, находится по адресу FormulateInputGroup > FormulateGrouping > FormulateRepeatableProvider > FormulateRepeatable > FormulateInput:

Когда я удаляю исходный элемент, чтобы он соответствовал желаемому исходному макету, иерархия групп изменяется на:

<FormulateInput><!-- the input type="group" -->
  <FormulateInputGroup>
    <FormulateGrouping/>
    <FormulateAddMore>...</FormulateAddMore>
  </FormulateInputGroup>
</FormulateInput>

Исходя из этого изменения, я ожидал, что мне нужно изменить FormulateGrouping чтобы получить желаемый исходный вид, но я не нашел в источнике, какие предметы мне там доступны.

Исследование: хак, который, кажется, работает

В смонтированном хуке, когда я впервые визуализирую форму, я могу погрузиться в самоанализ. formValues перешел к v-modelчтобы увидеть, не хватает ли группе начальных элементов, которые заполняются. Если да, то я могу воспользоваться ссылкойmsgs на FormulateInput группы типов для последующего вызова this.$refs.msgs.$children[0].$children[0].removeItem(), который запускает первоначальное удаление (пустого) элемента. Это супер хаки, поэтому я бы предпочел способ получше, но он вроде работает. Единственная проблема заключается в том, что он проверяет поля при нажатии на кнопку до того, как был введен какой-либо ввод.

Источник

3 ответа

Это справедливый вопрос, и Vue Formulate использовался для поддержки поведения простого использования пустого массива для начала, однако стало ясно, что пользователей сбивает с толку то, что их поля не отображаются без пустого объекта. [{}]когда они связывают модель, поэтому было внесено изменение, чтобы рассматривать начальное значение пустого массива как "пустое" поле и предварительно гидратировать его значением. Однако как только эта начальная гидратация будет завершена, вы можете легко переназначить ее обратно в пустой массив, и все готово. Это легко сделать вmounted крючок жизненного цикла:

...
async mounted () {
  await this.$nextTick()
  this.formData.groupData = []
}
...

Вот вилка вашей песочницы кода: https://codesandbox.io/s/vue-formulate-group-with-button-to-start-forked-32jly?file=/src/components/Reproduction.vue

Источник

Предоставленные решения не работали для меня, но благодаря предыдущему ответу мне удалось найти это:

      mounted(){
  Vue.set(this.formData, "groupData", [])
},

который имеет тот же эффект, что и

      data(){
  formData: {
    groupData: [],
  },
},
mounted(){
  this.formData.groupData = []
},
Источник 
      mounted() {
  this.$el.querySelector('.formulate-input-group-repeatable-remove').click();
}

Также работает вместо всей этой штуки со слотами/ссылками - при условии, что в компоненте есть только одна повторяющаяся группа.

Источник
Другие вопросы по тегам