Vue значение по умолчанию Dynami c выбор параметров - PullRequest
Новая
       50

Vue значение по умолчанию Dynami c выбор параметров

0 голосов
/ 19 марта 2020

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

Цель этого кода: получить билеты (продукты) через API (данные. json в этом примере) и отобразить их в таблице для пользователей, чтобы купить.

Часть, с которой я борюсь? Каждый продукт имеет номер, представляющий максимальную сумму, которую можно купить за пользователя. Я показываю эти значения динамически в настройках, что работает. Чтобы дать вам лучшее понимание, вот код:

https://codesandbox.io/s/headless-currying-gocrw?fontsize=14&hidenavigation=1&theme=dark

Все работает, как ожидалось и хотелось, но что действительно было бы здорово, это добавить ведущий ноль к номерам опций. Теперь, когда пользователь выбирает несколько билетов и передумает, он не сможет это сделать.

РЕДАКТИРОВАТЬ:

Если вы посмотрите код через URL выше , это действительно сейчас исправлено (благодаря решению +1 и использованию индекса в качестве моих значений). Теперь я хотел бы выбрать 0 в качестве значения по умолчанию. Я не совсем уверен, как этого добиться.

for-l oop выглядит так: 

<select v-model="selectedTickets[product.id]">
 <option v-for="(maximum, n) in Number(product.product_meta.maximum) + 1" :value="n" :key="n">
  {{ n }}
 </option>
</select>

Функция данных выглядит следующим образом: 

data() {
        return {
          selectedTickets: {},
          products: null
        };
      }

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Вы должны добавить: 

<option value="0"> 0 </option>

Перед вашим v-for l oop на options, поэтому это будет выглядеть так: 

<select v-model="selectedTickets[product.id]">
  <option value="0"> 0 </option>
  <option
    v-for="(maximum, n) in Number(product.product_meta.maximum)"
    :value="maximum"
    :key="n"
  >
    {{ maximum }}
  </option>
</select>

Теперь, это первое опция будет по умолчанию, и пользователь сможет go вернуться в любое время.

Еще одна вещь, которую вы можете сделать, это просто добавить +1 к product.product_meta.maximum и использовать n для :value вместо maximum.

Однако лучшим вариантом будет создание одного метода с именем getSelectableOptions(product), который будет возвращать массив выбираемых опций для данного продукта, например [0, 1, 2, 3, 4, 5], а затем вы могу ли я через него пройти oop, так ваш код будет чище.

Надеюсь, это поможет!

0 голосов
/ 19 марта 2020

Вы можете добавить кнопку сброса внизу, чтобы сбросить весь выбор 

<button @click="selectedTickets={}">Reset</button>

Также возможно реализовать отдельные кнопки сброса для каждого входа выбора, как показано ниже: 

<select v-model="selectedTickets[product.id]">
    <option
        v-for="(maximum, n) in Number(product.product_meta.maximum)"
        :value="maximum"
        :key="n"
    >
        {{ maximum }}
    </option>
</select>
<button
    @click="resetSelection(product.id)"
    v-if="product.id in selectedTickets"
>
    Clear
</button>

Затем создайте метод в секции methods 

resetSelection: function(productId) {
   delete this.selectedTickets[productId];
}

Это очистит отдельные выборки.

...