Vue Object Sync using Component and <Select> Input

Question

I need to sync an Object between a parent and child component in Vue using a <select> input but can't get the syntax correct.

component:

<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>

I need something like a standard .sync modifier, but it doesn't seem to work on select inputs with objects:

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

The condition is an object with id, name, and type attributes which come from the variable objects in the variable_options array. I've tried doing an initial_condition prop and then doing a v-model='selected_condition' on the select input like the docs recommend, but I don't know how to use that with a .sync modifier. Doing a :initial_condition.sync="rule.condition" isn't right.

Is there a way to pass the object attributes from the selected option in the child component, and update the parent component reactively? The data object's attributes are:

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

tony19 · Accepted Answer · 2019-02-17 22:52:29Z

1

Emit `<select>` value

$event.target.value refers to HTMLSelectElement.value, which is a string. This object value would be converted to a string (returning "[object Object]"), which would prevent the .sync from updating the original object properly.

A workaround would be to use HTMLSelectElement.selectedIndex into the variable_options[] property:

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

Default `<select>` value

The default value is set on the <option> (not the <select>). You could set <option>.selected to true based on the condition's ID:

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

demo

edited Feb 17, 2019 at 22:52

answered Feb 17, 2019 at 11:21

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Styx Over a year ago

$event.target.selectedOptions[0]._value would be better, I think

Travis Smith Over a year ago

Seems to be updating the parent. However, any ideas why my initial prop value wouldn't be reflected in the initial state of the <select> input? It's just defaulting to the first option in the list. rule.condition being sent in to the condition prop and each variable in variable_options has the same structure, so I thought it would find the match and reflect that option in the select?

tony19 Over a year ago

@TravisSmith The default select value is set by <option>.selected (not <select>.value).

Collectives™ on Stack Overflow

Vue Object Sync using Component and <Select> Input

1 Answer 1

Emit `<select>` value

Default `<select>` value

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Emit <select> value

Default <select> value

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Emit `<select>` value

Default `<select>` value