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

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>

我测试了这个，它有效