Как построить VUE форму как компонент - PullRequest
Новая
       6

Как построить VUE форму как компонент

0 голосов
/ 26 февраля 2019

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

<template>
<v-container>
  <v-form ref="form" lazy-validation>
    <v-text-field 
      v-bind:value="address.street"
      v-on:input="$emit('input', $event.target.value)"
      label="Number and Street">
    </v-text-field>
  </v-form>
</v-container>
</template>

<script>    
export default {
  name: 'address-form',
  props: ['address'],
  // other stuff
}
</script>

Родитель этого объекта получает из магазина более крупный объект и передает адрес в виде реквизита, подобного этому ... 

<p>Just to test: {{outerObject.address.street}}</p>
<address-form address="outerObject.address" v-on:changed-address="changedAddress" />

И в сценарии ... 

computed: {
  outerObject () {
    let id = this.$route.query.id
    let outerObject = this.outerObjects.find(o => o.id === id)
    return (outerObject) ? outerObject : this.newOuterObject
  },
  ...mapGetters(['outerObjects'])

Но две вещи идут не так:

(1), хотя я вижу, что externalObject правильно инициализируется вродительский компонент (я могу видеть outerObject.address.street очень хорошо), уличный ввод формы не имеет начального значения.

(2) Если я введу что-либо в этот ввод формы, я получу ошибку:

[Vue warn]: ошибка в обработчике v-on: «Ошибка типа: невозможно прочитать свойство 'значение' из неопределенного"

Единственное место, где отображается значение, относится квход.Но я понимаю, что value является свойством ввода (и $event.target).Я пытался изменить значение на улицу и различные перестановки, но мои догадки до сих пор были неверны.

Моя цель состоит в том, чтобы иметь "двустороннюю привязку" между входами компонента формы и outerObject на родительском элементе, поэтому, когда пользователь выполняет редактирование формы, outerObject изменяется.Что я делаю не так?

1 Ответ

0 голосов
/ 26 февраля 2019

Двухстороннее связывание достигается с помощью следующей стратегии:

  1. добавьте value в качестве одного из ваших props массивов.
  2. добавьте v-on:change в поле ввода внутриваш компонент.
  3. при изменении вы должны отправить изменение следующим образом this.$emit('input', newValue).

Теперь вы можете использовать свой компонент: <address-comp v-model='outerObject.address'></address-comp>

...