v-model do not work with hidden input ?

[ablipan]

my code:

<input type="hidden" name="measureTime" v-model="measureTime" v-validate="required">

this.measureTime is always empty, but i can see the value in the html source code.
html source code:

<input type="hidden" name="measureTime" value="af">

[yyx990803]

v-model doesn't work on hidden input because you shouldn't be using hidden input when you are using Vue. Why store state in the DOM when you can store it in JS directly?

[mocheaz]

Just came across.

I need using it with select2 type select tag, and the way it works, it's hides the select and show something else.
I know i can use directive but wold be easier if we could just override this behaviour.

[rjoo]

Had an issue with Edge not liking v-model on hidden inputs and came across this.

I think the intention with v-model on hidden inputs is to set up a one-way binding, in which case it's much better to use <input type="hidden" :value="someData" >

[tormjens]

Yeah. @rjoo's solution saved the day.

[Ridermansb]

@yyx990803 same libraries like semantic-ui require hidden input, e.g to display dropdown with multiples selection.

@rjoo using :value not solve my problem, I use Vue.js 2.0, whats version you are using?

[cspeer]

I overcame this problem by using ref on the parent element and then watching for a change either on the hidden field or wait for a callback from the 3rd party lib like semantic ui and then $emit the new value to the ref.
I wrap my 3rd party scripts in components to make them reusable, so here is a quick example of how this would look with semantic ui's dropdown:

<template>
  <div class="ui dropdown" ref="input">
    <slot></slot>
  </div>
</template>

<script>
  require('../../semantic/dist/components/dropdown.js');

  export default {
    props: ['value'],
    mounted() {
      $(this.$el)
        .dropdown()
        .dropdown('setting', 'onChange', (value) => {
          this.$emit('input', value);
        })
      ;
    }
  }
</script>

after this you can use v-model as usual:

<dropdown v-model="myModel">
  Dropdown Stuff
</dropdown>

Works like a charm. VueJs <3

[vinayakkulkarni]

In your main.js or app.js

Vue.component('semanticui-dropdown', {
  template: `<div class="ui selection dropdown">
  <input type="hidden" :value="value">
  <i class="dropdown icon"></i>
  <div class="default text">{{defaultText}}</div>
  <div class="menu">
    <div v-for="item in items" class="item" :data-value="item.id">{{ item.name }}</div>
  </div>
</div>`,
	props: ['items', 'value', 'defaultText'],
	watch: {
		value: function (val, oldVal) {
			if(val == null) {
				$(this.$el).dropdown('clear');
			}
		}
	},
	mounted() {
		console.log('init the dropdown');
		var t = this;
		$(t.$el).dropdown('refresh').dropdown({onChange: function (value, text, $choice) {
			t.$emit('input', value);
		}});
	}
});

You can change the template wrapped in ` ` as much as you want.
and in your VueComponent.vue

<semanticui-dropdown v-model="id" :items="products" default-text="Choose Products"></semanticui-dropdown>

Ba-Dum-Tss!

[mclxly]

@cspeer Thank you for your code. It works. But it still logs warning info when I change dropdown:

[vue-devtools] Ready. Detected Vue v2.1.10
Dropdown: undefined

[cspeer]

@mclxly Are you sure you got the latest semantic ui version? I don't see these warnings and my code is exactly like the one described above.

[mclxly]

@cspeer Semantic UI - 2.2.7

Today I fixed my problem.

I move the following function into my Vue component.
$( document ).ready(function() { $('.ui.dropdown').dropdown({ // dropdown not defined here on: 'hover' }); });

[ryabenko-pro]

Why store state in the DOM when you can store it in JS directly?

How about 3rd party plugins, like jquery color picker?

[hidegh]

@yyx990803 Hi, can you please explain me why such limitation got to VUE? html DOM itself allows to set values to hidden inputs...

[richardtallent]

I've been having the same problem and knocking my head against my desk for an hour over this. :(

I'll implement a workaround for SemanticUI's drop-down tomorrow. I suspect I'll need to do the same for TrumboWYG and ACE, both of which I use heavily in my application (as well as other SemanticUI form elements).

I suspect the underlying issue is that (regardless of input type), "onchange" events only happen in response to user actions, not setting the value programmatically, and since third-party controls using them to store their state don't manually trigger that event, there's nothing for Vue to watch.

Alas, guess we'll have to wait for SemanticUI and everyone else to Vue all the things... :)