Vue: Как сделать примитивную опору реактивной (должна обновляться при изменении в родительском компоненте) - PullRequest
Новая
       83

Vue: Как сделать примитивную опору реактивной (должна обновляться при изменении в родительском компоненте)

0 голосов
/ 06 августа 2020

Я начал небольшое обсуждение в этом посте: vue: как сделать объект, переданный компоненту, реактивным? в разделе комментариев.

(Спасибо @DecadeMoon, кто пробовал чтобы помочь мне там ...)

Из-за ограниченных параметров в поле для комментариев я начинаю здесь новую тему:

Проблема У меня есть форма при загрузке есть несколько пустых полей ввода. Форма устанавливает фильтр для пользовательского интерфейса. Параметры фильтров «сохраняются» в URL-адресе, что позволяет делиться определенной настройкой фильтра.

domain.com?filter1=value1&filter2=value2

Итак, при загрузке я проверяю, присутствуют ли какие-либо параметры запроса, и если да, я сохраните их в моем магазине vuex. Несколько компонентов следят за магазином vuex, чтобы обновить свой пользовательский интерфейс. То же самое делает и сам фильтр, и таблица данных с фактическими отфильтрованными элементами.

Моя проблема в том, что мои поля ввода должны быть «заполнены» значениями из URL-адреса.

Итак У меня есть следующий информационный путь: 

 1. filter is initiated with empty fields
 2. Check url params
 3. save url filter to vuex store
 4. parent component (form) receives set filter
 5. parent component should update it's child (input field)

Но позвольте мне поделиться некоторым кодом, чтобы проиллюстрировать это больше: 

// FilterForm.vue

...
props: {
    fields: {
    //  contain also the information about the value of a field
    // is being passed down as a prop of its parent, which watches the vuex store
      type: Array,
      required: true,
    },
  },
...
</script>

<template>
...
<template v-for="(field, index) in fields">
<FormFieldText
  if="field.type === 'text'"
  :key="index"
  v-model="formData[field.name]"
  :value="field.value" <------------
/>
...

В моем vue инспекторе я вижу, что данные в FormFieldText обновляется: enter image description here enter image description here (first of course this value is empty, and then the url value is passed down until here.)

Now because field.value is bound within the template: :value="field.value" I would expect that the value of the child is updated whenever field.value (String) changes.

введите описание изображения здесь

Это не так. 

// FormFieldText.vue

export default {
  name: 'FormFieldText',
  props: {
    value: { <------------
      type: String,
      required: false,
      default: '',
    },
...
</script>

<template>
  ...
      <input
        type="text"
        :value="value" <------------
        @input="$emit('input', $event.target.value)"
      />
    </label>
...
</template>

Я тоже пытался посмотреть value, но этот наблюдатель тоже никогда не запускается. 

watch: {
    value: {
      handler(newValue) {
        console.log('newValue: ', newValue)
      },
    },
  },

Итак, как я могу добиться следующего:

  1. Родитель инициирует дочерний элемент с пустым значением
  2. Родитель получает от своего собственного родителя обновление данных
  3. Родитель должен передать эту информацию дочернему элементу.
  4. Ребенок должен обновить свой пользовательский интерфейс (показывая значение в поле ввода).

Надеюсь, я более или менее ясно понял свою проблему. Если что-то останется неясным, я буду рад уточнить его.

Спасибо за любой вклад. Ура

...