Vue привязка ввода известных и неизвестных значений - PullRequest
Новая
       7

Vue привязка ввода известных и неизвестных значений

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

У меня есть объект, который содержит как известные, так и неизвестные значения. Количество неизвестно, тип известен. Я хочу представить пользовательские входные данные для каждого типа, а пользователь вводит количество. Как мне смоделировать это в Vue? 

  data() {
    return {
      message: "",
      order: {
        orderDetails: [], // end result, after user made choices: [{ quantity: 1, productType: "A"}, {quantity: 1 , productType :"B"}] ,
      },
      productType: ["A", "B", "C", "D"],
    };
  },

и 

<ul>
  <li v-for="(item, index) in productType" :key="index">
    <input type="number" v-model="?order.orderDetails[index].quantity?" /> {{ item }}
  </li>
</ul>

, и желаемый результат выглядит примерно так 

<ul>
  <li><input type="number"> A </li>
  <li><input type="number"> B </li>
  <li><input type="number"> C </li>
  <li><input type="number"> D </li>
</ul>

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

1 Ответ

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

Лучше всего структурировать вашу модель данных так, чтобы она отражала представление. Если вы храните типы продуктов и количества отдельно, то вам будет трудно попытаться соединить их вместе в представлении, потому что данные будут повсеместно.

Вы хотите иметь список входных данных для каждого типа, поэтому ваша модель данных может быть массивом объектов, каждый из которых имеет свойство productType и свойство quantity. Первоначально каждое количество будет равно 0. 

data() {
  return {
    orderDetails: [
      { productType: 'A', quantity: 0 },
      { productType: 'B', quantity: 0 },
      { productType: 'C', quantity: 0 },
      { productType: 'D', quantity: 0 },
    ]
  }
}

Но, допустим, вы не знаете, какие типы будут опережать время (возможно, вы выбираете типы из какого-то API), поэтому вы не можете структурировать такие данные прямо в коде, как я показал. Итак, все, что вам нужно сделать, это динамически создать массив orderDetails, если у вас есть массив типов: 

data() {
  return {
    orderDetails: []
  }
},

async created() {
  // Fetch the types from some hypothetical API
  const types = await fetchTypes()

  // Populate the orderDetails array from the types
  this.orderDetails = types.map(type => ({
    productType: type,
    quantity: 0,
  }))
}

Теперь это всего лишь отображение 1-к-1 между данными и представлением! 

<ul>
  <li v-for="(item, index) in orderDetails" :key="index">
    <input type="number" v-model="item.quantity">
    {{ item.productType }}
  </li>
</ul>

Ваше представление (шаблон) должно быть очень простым без сложной обработки данных; это должна быть простая функция данных.

...