Возвращение переменных из директивы Vue.js - PullRequest
Новая
       24

Возвращение переменных из директивы Vue.js

1 голос
/ 27 апреля 2019

Vue.js имеет встроенную директиву под названием v-for, которая используется для литерации по списку.

HTML код 

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

Код сценария 

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Здесь с помощью директивы v-for элементы в массиве items возвращаются как переменные с именем item. Здесь переменные, возвращаемые этой директивой v-for, могут быть использованы в HTML DOM. Как мне создать такую ​​пользовательскую директиву, которая возвращает переменную в HTML DOM?

Примечание: я действительно искал исходный код директив v-for в исходном коде *1018* vuejs, но не смог найти. Пожалуйста, помогите мне получить это, поскольку я очень плохо знаком с vuejs. Спасибо.

Редактировать

Что у меня сейчас есть?

Для ввода «Имя», «Фамилия» и «Адрес» есть 3 одинаковые группы ввода соответственно. Каждое поле ввода имеет свойства label, state, disabled, value и max, которые хранятся в массиве inputOptions. 

<!-- HMTL -->
<b-input-group :prepend="inputOptions.firstName.label">
    <b-form-input 
        :state="inputOptions.firstName.state" 
        v-model="inputOptions.firstName.value" 
        :disabled="inputOptions.firstName.disabled" 
        :maxlength="inputOptions.firstName.max"
        ></b-form-input>
</b-input-group>

<b-input-group :prepend="inputOptions.lastName.label">
    <b-form-input 
        :state="inputOptions.lastName.state" 
        v-model="inputOptions.lastName.value" 
        :disabled="inputOptions.lastName.disabled" 
        :maxlength="inputOptions.lastName.max"
        ></b-form-input>
</b-input-group>

<b-input-group :prepend="inputOptions.address.label">
    <b-form-input 
        :state="inputOptions.address.state" 
        v-model="inputOptions.address.value" 
        :disabled="inputOptions.address.disabled" 
        :maxlength="inputOptions.address.max"
        ></b-form-input>
</b-input-group>

// Script 

inputOptions: {
            firstName: {
                label: 'First Name',
                state: true,
                value: 'Foo',
                disabled: true,
                max: 45
            },
            lastName: {
                label: 'Last Name',
                state: true,
                value: 'Bar',
                disabled: true,
                max: 45
            },
            address: {
                label: 'Address',
                state: false,
                value: 'Foo, Bar.',
                disabled: true,
                max: 255
            },
}

Что мне нужно было сделать

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

<!-- HMTL -->
<b-input-group v-mydirective="inputOptions.firstName as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

<b-input-group v-mydirective="inputOptions.lastName as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

<b-input-group v-mydirective="inputOptions.address as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

// Сценарий 

inputOptions: {
            firstName: {
                label: 'First Name',
                state: true,
                value: 'Foo',
                disabled: true,
                max: 45
            },
            lastName: {
                label: 'Last Name',
                state: true,
                value: 'Bar',
                disabled: true,
                max: 45
            },
            address: {
                label: 'Address',
                state: false,
                value: 'Foo, Bar.',
                disabled: true,
                max: 255
            },
}

1 Ответ

1 голос
/ 29 апреля 2019

HTML

В вашем шаблоне итерируйте несколько inputOptions, используя v-for, например: 

<div id="app">
  <b-input-group v-for="option in inputOptions" :key="option.label" :option="option" />
</div>

SCRIPT

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

Vue.component('b-label', {
  props: ['label'],
  template: '<div>{{ label }}</div>'
})

Vue.component('b-form-input', {
  props: ['state', 'value', 'disabled', 'maxlength'],
  template: '<input type="text" :value="value" />'
})

Vue.component('b-input-group', {
  props: ['option'],
  template:
  `<div>
    <b-label :label="option.label" />
    <b-form-input
        :state="option.state"
        v-model="option.value"
        :disabled="option.disabled"
        :maxlength="option.max" />
  </div>`
})

FIDDLE

Демонстрация JSFiddle

Это базовый пример использования компонентов. Любые преобразования, которые вам нужно сделать со строками, можно выполнить в связанных компонентах с помощью computed свойств или методов. Вы можете увидеть демонстрацию, нажав на ссылку, где я использую свойство computed, чтобы преобразовать метки в нижний регистр. Этого должно быть достаточно, чтобы вы пошли.

...