Question

只是尝试通过Vue访问select元素的选定文本（而不是值）：

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

这里我尝试创建一个绑定，因为如果我不能提交表单，因为选项值是＆＃34; [object Object]＆＃34;，但我需要真正的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>

使用Vue访问select元素的选定文本（非值）

1 个答案: