How do I get the DOM Object of a v-model?

You can get the id from this.priorities.id assuming you set one in your html.

Hmm, that doesn't seem to work either. here is what I have now:

<select id="filter_priorities"
                  v-model="priorities">

and

console.log(this.priorities.id);

Gives me undefined every time.

Does this work for other people? I have other stuff going on in my code, but I don't seem to be able to access the id field of my v-model like this, and when I output to json there is only the value for the v-model, no additional fields of data like the id.

Sorry. Looking wrong spot. In your Vue instance look in $el. There is a children array.

Thanks for the info, but I am still not finding anything. I am surprised more people haven't had a need for this. I see that $el returns the root node, but I don't see any way to figure out which DOM element is matched to which v-model.

This seems like something that would come up all the time, right? Needing to change the DOM using something other than Vue (like jQuery), but in a Vue instance with a mapped v-model?

If anyone has figured this out, please let me know! I suppose in the meantime I could give every object and id that matches the v-model, but that feels like a big hack that could lead to problems with a lot of these fields.

@TonsOfLaz, check this link http://vuejs.org/api/#v-el. I have tested the following code and it shows the select elements id in the console.

...

{{ option.text }}

Selected: {{ selected }}

Selected: {{ comp }}

<script>
  new Vue({
    el: '#app',
    data: {
      selected: 'A',
      options: [
        {text: 'One', value: 'A'},
        {text: 'Two', value: 'B'},
        {text: 'Three', value: 'C'}
      ]
    },
    
    computed:{
      comp: function() {
        console.log(this.$els.listBox.id);
        return this.selected;
      }
    }
  })
</script>

...

Sorry! My html code is not showing properly.

<div id="app">
      <select id="element" v-el:list-box v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <p><span>Selected: {{ comp }}</span></p>
    </div>

Hi @tayalanil , thanks for the detailed code example!

So it appears that there may be no way to get the element id from JUST the v-model assignment, if you also add a v-el:identifier then you can use the this.$els array to access it.

I have about 50 inputs or so, so I was hoping to keep it simple by just using the v-model on each, but if I need to give each a v-el as well, then so be it.

Thanks again. If anyone else can verify there is no way to do it with just v-model, I will mark this as complete.

Nope, no way to do it.

The data is separate from implementation - for example, you could display the same data in multiple places, therefore a single reference doesn't make sense.

You could use v-el as suggested or possibly build a component with any extra functionality you needed - for example binding to change events, manipulating data provided by props with computed properties, etc.

Vue.component('select', 
{
    ...
    props:['options'],
    ready:function()
    {
        // do something with this.$el
    },
    computed:
    {
        displayOptions:function()
        {
            return this.options.map( option => option.toUpperCase() );
        }
    }
})

Ah ok, @davestewart, that is a good point that a single reference doesn't make sense. It just seemed odd because the Vue object must know what it is attached to, but it is true that it could be attached to several DOM Objects so there should be a separate system for mapping the DOM in place if you want to do that.

Thanks to @tayalanil for the code example.