使用 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);
...

在这里我尝试创建一个绑定，因为如果我不提交表单，因为选项值为“[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

我认为您无法通过计算来做到这一点，因为您不会将选定的选项存储在任何地方，而只会存储它的值。

相反，您可以创建一个数据项并使用 select 上的 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>