Access selected text (not value) of a select element with Vue

Question

Just trying to access the selected text (not value) of a select element via Vue:

var App = window.App = new Vue({
  el: '#app',
  data: {
    style: '5'
  },
  computed: {
    calctitle: function() {
      return this.otype.text;
    }
  }
});

Just an example style object:

$item = new stdClass();
$item->value = 5;
$item->text = 'Name 1';
$style = array($item);
...

Here i try to create a binding because if i don't cannot submit the form because the option value is "[object Object]", but i need the real int value.

<p>{{calctitle}}</p>
<select v-model="style" name="style">
    <option>Choose style</option>
    <?php foreach ($style as $item) : ?>
        <option value="<?php echo $item->value; ?>"  v-bind:otype="{value: <?php echo $item->value; ?>, text: '<?php echo $item->text; ?>'}"><?php echo $item->text; ?></option>
    <?php endforeach ?>
</select>

Roy J Roy J · Accepted Answer · 2017-05-22T16:22:28

I don't think you'll be able to do it with a computed, since you don't store the selected option anywhere, only its value.

Instead, you can create a data item and use the change event on the select to pull the selected option and set your data value from its textContent.

new Vue({
  el: '#app',
  data: {
    selectedText: '',
    style: '5'
  },
  methods: {
    updateFromSelectedText(event) {
      const options = event.target.options;
      const selectedOption = options[options.selectedIndex];

      this.selectedText = selectedOption.textContent;
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<p>{{selectedText}} and {{style}}</p>
<select v-model="style" name="style" @change="updateFromSelectedText">
    <option>Choose style</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <!--option value="<?php echo $item->value; ?>"  v-bind:otype="{value: <?php echo $item->value; ?>, text: '<?php echo $item->text; ?>'}"><?php echo $item->text; ?></option-->

</select></div>

Access selected text (not value) of a select element with Vue

1 Answers