I am attempting to retrieve a value from a dropdown menu but I am encountering difficulties

Question

I am attempting to retrieve a value from a dropdown menu but I am encountering difficulties

Within the structure of a Vue component's template, I have the following code:

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

Upon trying to access the selectedIndex property of the select element within intervChange function, it consistently returns a value of 0.

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

What might be causing this issue in my implementation?

javascript select vue.js

Answer 1

Answer №1

It seems like the issue lies in how your function is being called. The problem arises from using @change="intervChange(row)", where the row parameter is causing issues. To resolve this, simply remove the data parameter from the function and the row parameter from the function call.

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>

I have tested this solution and it works perfectly now.

Answer 2

It seems like the issue lies in how your function is being called. The problem arises from using @change="intervChange(row)", where the row parameter is causing issues. To resolve this, simply remove the data parameter from the function and the row parameter from the function call.

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>

I have tested this solution and it works perfectly now.

Answer 3

Answer №2

Perhaps this is the format you are seeking

<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:"Supporter", text:'Support'},
                {value:"Advisor", text:'Advise'},
                {value:"Communicator", text:'Communicate'},
                {value:"Decision Maker", text:'Decide'}
            ]
        },
        methods:{
            intervChange: function() {
                opindex=this.$el.selectedIndex
                opvalue=this.options[opindex].value;
                console.log(opindex +':'+opvalue);
            }
        }
    });
</script>

Answer 4

Perhaps this is the format you are seeking

<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:"Supporter", text:'Support'},
                {value:"Advisor", text:'Advise'},
                {value:"Communicator", text:'Communicate'},
                {value:"Decision Maker", text:'Decide'}
            ]
        },
        methods:{
            intervChange: function() {
                opindex=this.$el.selectedIndex
                opvalue=this.options[opindex].value;
                console.log(opindex +':'+opvalue);
            }
        }
    });
</script>

Answer 5

Answer №3

I implemented a vue subcomponent and now created a generic subcomponent:

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

I utilized it in a straightforward manner:

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

I implemented a vue subcomponent and now created a generic subcomponent:

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

I utilized it in a straightforward manner:

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

I am attempting to retrieve a value from a dropdown menu but I am encountering difficulties

Answer №1

Answer №2

Answer №3

Similar questions

An array in JSON format containing only one element

Ensure history.back() does not trigger Confirm Form Resubmission

Tips for sending values via props to a different component and the common error message: "Consider using the defaultValue or value props instead of setting selected on the <option> element"

Is it a cookie-cutter function?

Which symbol or character corresponds to the public "get symbol" method?

Automatically populating fields in Laravel 8 after selecting a value from a dropdown menu

Troubleshooting Problem in Coursera's AngularJS Week 3 Exercise 4

``From transitioning from Django templating to implementing a full RESTful architecture?

When using react, it is not possible to have a <span> element as a child of a <

Detection of numerous Google Analytics tags

Reduce the size of your Javascript files to the earliest possible version

Outputting an object using console.log in Node.js

What could be causing my token to not save after registering a user?

Angular2: The NgFor directive is designed to work with Iterables like Arrays for data binding

Why am I unable to utilize methods in Vue.js?

Retrieve text from an element using jQuery when triggering "mouseenter" on a different element

Does it seem typical to witness everything like this during the Vue JS CLI installation process?

In JavaScript, Identify the filename selected to be attached to the form and provide an alert message if the user chooses the incorrect file

Show me a list of all the commands my bot has in discord.js

What is the best way to display three unique maps simultaneously on separate views?