vue: v-model do not work with hidden input ?

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?

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

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

I know this issue is very old. But I can’t find any simpler solution that just use the basic layout of semantic ui dropdown. So I just want to share a work around when using Semantic UI dropdown by attaching to change event on the hidden field.

<input type="hidden" v-model="yourModelProperty" @change="yourModelProperty=$event.target.value" >

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

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

• v-model is meant to provide a two-way binding and react tu user-input.
• Hidden fields can’t have user input.
• Consequently, it doesn’t make much sense to have v-model on a hidden input.

Just use v-bind:value.

But I just want to use the submit event of form

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

const field = document.querySelector(“input[id=trix-input-]”).value I’m using this as a solution.

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!

Why is it closed?? Vue will not be friends with hidden fields?? 🤔

Trying to have a custom OTC input from design, ran into this issue. I resolved it by setting the CSS to opacity: 0 and making the input absolute so it didn’t take up space in the layout. Display:none and visibility:hidden both prevented v-model binding. I get the philosophy, but seems like having these types of safety just means we have to resort to even trickier solutions.

The core problem is that HTML fields don’t fire a DOM event when JavaScript code changes the value of the field, only when the user interacts with the field. So there’s nothing for Vue to “listen” for that would indicate a change in the value.

This is true of any field modified by third-party code, not just hidden fields, but hidden fields are sort of special because they never emit events (because the user never interacts with them).

There are two ways I’m aware of to work around this (I haven’t used either yet):

1. Modify the third-party code to, in addition to setting the hidden field value, fire a “change” event (or a synthetic event if using the native one is problematic) on that element. Then I expect you could add a v-on listener in Vue like you would to respond to a user’s native input.

2. Have your Vue control set up a MutationObserver (assuming you don’t need IE10 support) to watch the value attribute of the hidden field. Theoretically, you might be able to code this up in the form of a Vue directive so it can be re-used easily.

Or… find or write an even better color picker in Vue! 😃

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

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

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