Как назначить v-модель на v-for (из примера начальной загрузки) - PullRequest
Новая
       66

Как назначить v-модель на v-for (из примера начальной загрузки)

0 голосов
/ 30 октября 2019

Я использую vue-bootstrap для создания полей ввода с помощью директивы v-for. То, что я пытаюсь сделать, это в основном тот же пример, что и в этой ссылке , но я не могу понять, как получить данные, которые я собираю, в директиву v-модели (я имею в виду, получить данные извходы).

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

Этот код (vue-js) скопирован почти точно со страницы примеров, но с моими неудачными модификациями (с комментариями) : 

<template>
  <b-container fluid>
    <code>{{result}}</code>
    <b-row class="my-1" v-for="type in types" :key="type">
      <b-col sm="3">
        <label :for="`type-${type}`">Type {{ type }}:</label>
      </b-col>
      <b-col sm="9">
        <!-- here I modified the v-model part -->
        <b-form-input :id="`type-${type}`" :type="type" :v-model="`result.${type}`"></b-form-input>
      </b-col>
      <!-- here I added the same "v-model" that I placed into the previous line -->
      <p>{{`result.${type}`}}</p>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        // here I placed the result object and I expected to obtain something like this:
        /*
result: {
text: "the text",
password: "the password" 
...
...
}
        */
        result: {},
        types: [
          'text',
          'password',
          'email',
          'number',
          'url',
          'tel',
          'date',
          `time`,
          'range',
          'color'
        ]
      }
    }
  }
</script>

Может ли кто-нибудь объяснить, что я делаю не так? Я пытался найти документацию "`type-${type}`" в выражении v-for, но не смог ее найти.

1 Ответ

1 голос
/ 30 октября 2019

Инициализируйте result как: 

result: {
  text: '',
  password:, '',
  email: '',
  number: '',
  url: '',
  tel: '',
  date: '',
  time: '',
  range: '',
  color: ''
}

И в вашем шаблоне и v-model используйте [] вместо . для доступа к ключу, т.е. result.${type} => result[type].

Также обратите внимание, что v-model сама по себе является директивой, поэтому вам не нужно использовать v-bind (:) здесь: 

<b-form-input :id="`type-${type}`" :type="type" v-model="result[type]">
</b-form-input>
...