Vue: 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... :)

[richardtallent]

Sent PR for suggested addition to documentation about this:

https://github.com/vuejs/vuejs.org/pull/957

[shaozhuang]

But I just want to use the submit event of form

[LinusBorg]

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.

[manik005]

@vinayakkulkarni thanks for the code snippet. Any clue on how to get this semantic calendar plugin to work with vue js?

[vinayakkulkarni]

@manik005
I'm using the modified version of Bootstrap Datepicker

Created a small component for it.

Vue.component('single-calendar', {
  template: `<div class="ui left icon input">
          <i class="calendar active icon"></i>
          <input type="text" :value="value" :placeholder="placeholder" style="cursor: pointer;">
          <i class="dropdown active icon" style="right: 1px !important; left: auto !important;"></i>
        </div>`,
  props: ['value', 'placeholder'],
  mounted() {
    if (this.placeholder === '' || this.placeholder === undefined) {
      return;
    };
    var t = this;
    $(this.$el).daterangepicker({
          singleDatePicker: true,
          showDropdowns: true,
          autoApply: true
      }, 
      function(start, end, label) {
          t.$emit('input', end.format('DD-MM-YYYY'));
      });
  }
});

Usage:

<single-calendar v-model="this.date_of_birth" placeholder="Date of Birth"></single-calendar>

[manik005]

ah I guess I tried the same way for semantic calendar but it didn't work.

[richardtallent]

@manik005, here's what I'm using with that Semantic calendar date-picker. I'm listening for the picker's change event and updating the underlying property. This works for both dates chosen in the picker and those made directly by the user in the input element.

My field properties all come in through a prop rather than binding them individually, which is how I'm mutating the field prop's value key. This wouldn't be considered a best practice by the "props down events up" purists. You could do something similar using a custom input component (https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events) so your calling code can use v-model as if it were a native form element.

<template>
    <div class="ui calendar" ref="wrapper">
        <div class="ui fluid input left icon" :class="{required: field.isRequired}">
            <i class="calendar icon"></i>
            <input type="text" :name="field.name" ref="valueField" :value="field.value">
        </div>
    </div>
</template>
<script>
    module.exports = {
        name: "field-input-date",
        props: ['field'],
        mounted: function () {
            const f = this.$refs.valueField;
            const fdata = this.field;
            $(this.$refs.wrapper).calendar({
                type:       'date',
                today:      true,
                onChange:   function (date, text, mode) {
                    fdata.value = text;
                    return true;
                }
            });
        }
    }
</script>

[T0miii]

@cspeer I got the same problem, and wanted to try your solution.
Did you ever encounter the problem that, when you select a value its alway that previous value that is selected?

For example if you have an empty select, you pick a value and console.log -> you get empty. After tat you pick a value and the previously picked one gets console.loged.

[acebalajadia]

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

[mkwsra]

In my case @acebalajadia solution didn't work with me, it was listing it as [object Object] so I had to come up with alternative way:

<input type="hidden" name="foo" :value="JSON.stringify(foo)">

[pkanane]

Rather than needing a hidden input element to pass data to vue, you can directly set the data object directly if vue has been declared as a variable available in a global context.
Step1:

var vm = new Vue({
    el: '#app',
    data: {
             yourData: ""
   }
}}

Step2:
For example in your html you can directly set yourData with your value

<script type="text/javascript">
vm.yourData = "+[whatever data you may have been placing in a hidden input]+"
</script>

[rainbowhat]

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

[waspar]

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

[ryabenko-pro]

@pkanane thats brilliant, but what if I need to catch update from 3rd party plugin (like a color picker) who creates and updates a hidden input? Will appreciate advise.

[richardtallent]

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! :)

[fabiomuniz01]

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

It save me!!! tks!!!