Question

我在一个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>

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

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

这种方法有什么问题？

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

我对此进行了测试，

Answer 2

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

Answer 3

我想你想这样

<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 个答案: