我正在尝试使用选择列表中的值但没有成功答案

【问题标题】：I am trying to use a value from a select list with no success我正在尝试使用选择列表中的值但没有成功
【发布时间】：2019-05-19 11:46:56
【问题描述】：

我在一个vue组件的模板中：

<td>
  <select id="papel" @change="intervChange(row)">
    <option value="Apreciador">Apreciar</option>
    <option value="Assessor">Assessorar</option>
    <option value="Comunicador">Comunicar</option>
    <option value="Decisor">Decidir</option>
    <option value="Executor">Executar</option>
    <option value="Iniciador">Iniciar</option>
  </select>
</td>

当我尝试检查 selectedIndex 时，返回的值始终为 0。

methods: {
  intervChange: function(data){
    var i = document.getElementById("papel");  
    console.log(i.selectedIndex);  
    var typeInterv = i.options[i.selectedIndex].value;
    console.log(typeInterv)
},

这种方法有什么问题？

【问题讨论】：

所以，你选择了一些东西并调用了intervChange(row)，但console.log(i.selectedIndex); 只返回了0？顺便说一句，如果你不使用它，为什么你有一个data 参数？
为什么不使用 v-model 使用 v-model 很容易操作数据

标签： javascript select vue.js

【解决方案1】：

实际上问题在于您的函数调用你已经使用了@change="intervChange(row)" 现在这个行参数是什么造成问题。只需从函数中删除数据参数并从函数调用中删除行即可。

function intervChange() {

     var i = document.getElementById("papel");
     console.log(i.selectedIndex);
     var typeInterv = i.options[i.selectedIndex].value;
     console.log(typeInterv)
 }
<select id="papel" onchange="intervChange();">
    <option value="Apreciador">Apreciar</option>
    <option value="Assessor">Assessorar</option>
    <option value="Comunicador">Comunicar</option>
    <option value="Decisor">Decidir</option>
    <option value="Executor">Executar</option>
    <option value="Iniciador">Iniciar</option>
  </select>

我对此进行了测试，它确实有效

【讨论】：

是的，但我想更改函数内部的行以便将新值传递给父组件...

【解决方案2】：

我猜你想要这样

<td>
<select id='app' @change=intervChange() >
    <option v-for='op in options' :value='op.value'>{{op.text}}</option>
</select>
</td>

<script>
    var vm= new Vue({
        el: '#app',
        data: {
            options: [
                {value:"Apreciador", text:'Apreciar'},
                {value:"Assessor", text:'Assessorar'},
                {value:"Comunicador", text:'Comunicar'},
                {value:"Decisor", text:'Decidir'}
            ]
        },
        methods:{
            intervChange: function() {
                opindex=this.$el.selectedIndex
                opvalue=this.options[opindex].value;
                console.log(opindex +':'+opvalue);
            }
        }
    });
</script>

【讨论】：

【解决方案3】：

我是用一个 vue 子组件做的，现在是一个通用子组件：

Vue.component('select-value-from-list', {
  template: `
    <select v-model="current-value">
        <option v-for='op in options' :value='op.value'>{{op.label}}</option>
    </select>
  `,
  props: {
      options: {
          type: Array,
          required: true
      }
  },
  data: function() {
      return {
          "current-value": "Apreciador"
      }
  },
  watch: {
        current-value: function () {
            this.$emit('value-change', this.current-value);
        }
  }
})

我用最简单的方式：

<td>
  <select-value-from-list 
    :options = "[{label: 'Apreciar', value: 'Apreciador'},
                {label: 'Assessorar', value: 'Assessor'},
                {label: 'Comunicar', value: 'Comunicador'},
                {label: 'Decidir', value: 'Decisor'},
                {label: 'Executar', value: 'Executor'},
                {label: 'Iniciar', value: 'Iniciador'}]"
    @value-change="mudarIntervencao($event, row)"
  />
</td>

【讨论】：