Vue Object Sync с использованием компонента и <Select>Ввод - PullRequest
Новая
       7

Vue Object Sync с использованием компонента и <Select>Ввод

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

Мне нужно синхронизировать Объект между родительским и дочерним компонентами в Vue с помощью ввода <select>, но не могу получить правильный синтаксис.

компонент: 

<template>    
  <div>
    <select :value="condition" @change="$emit('update:condition', $event.target.value)">
      <option v-for="variable in variable_options" :value="variable" :key="genUniqueKey(variable)">{{ variable.name }}</option>
    </select>
  </div>
</template>

<script>
  module.exports = {
    props: ['variable_options', 'condition']
  }
</script>

Мне нужно что-то вроде стандартного .sync модификатора, но, похоже, он не работает на выбранных входах с объектами: 

<variable-select :variable_options="application_questions" :condition.sync="rule.condition">
</variable-select>

condition - это объект с id, name и type атрибуты, полученные из объектов variable в массиве variable_options.Я попытался сделать initial_condition опору, а затем сделать v-model='selected_condition' на входе select, как рекомендуют документы, но я не знаю, как использовать это с модификатором .sync.Выполнение :initial_condition.sync="rule.condition" не правильно.

Есть ли способ передать атрибуты объекта из выбранной опции в дочерний компонент и реактивно обновить родительский компонент?Атрибуты объекта данных: 

rule: {
  condition: {
    id: '',
    name: '',
    type: ''
  }
}

1 Ответ

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

Emit <select> значение

$event.target.value относится к HTMLSelectElement.value, который является строкой.Это значение объекта будет преобразовано в строку (возвращающую "[object Object]"), что помешает .sync должным образом обновить исходный объект.

В качестве обходного пути можно использовать HTMLSelectElement.selectedIndex в variable_options[]свойство: 

<select @change="$emit('update:condition', variable_options[$event.target.selectedIndex])">

По умолчанию <select> значение

Значение по умолчанию устанавливается на <option> (не <select>).Вы можете установить <option>.selected в true на основе идентификатора условия: 

<option v-for="variable in variable_options"
        :selected="condition.id === variable.id"
        ...>

demo

...