vue.js - 使用 Vue 访问选择元素的选定文本(而不是值)

Question

只是尝试通过 Vue 访问选择元素的选定文本(而不是值):

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

只是一个示例样式对象:

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

在这里，我尝试创建一个绑定(bind)，因为如果不创建绑定(bind)，则无法提交表单，因为选项值为“[object Object]”，但我需要真正的 int 值。

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

Answer 1

我认为您无法使用计算来完成此操作，因为您不会将所选选项存储在任何地方，仅存储其值。

相反，您可以创建一个数据项，并使用选择上的 change 事件来拉取所选选项并从其 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>