<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.10</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="http://jsfiddle.net/mattoconnell408/df4Lnuw6/137/" rel="nofollow">http://jsfiddle.net/mattoconnell408/df4Lnuw6/137/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Use PhantomJS 2.1.1<br>
Set up a checkbox within a component.<br>
Bind a handler function to the change event on the checkbox<br>
Bind a data value to the <code class="notranslate">v-model</code> attribute</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">The expected behavior is shown in the fiddle.<br>
The value bound to <code class="notranslate">v-model</code> should change to true when the checkbox is clicked. The handler method should emit the new <code class="notranslate">v-model</code> value.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Possible incompatibility issue with Phantom. An initial click on the checkbox should change the value bound in the <code class="notranslate">v-model</code> to <code class="notranslate">true</code>. Instead, it reports <code class="notranslate">false</code>. The v-model value <strong>is</strong> changing with each click. It appears the handler bound to the <code class="notranslate">@change</code> event is being called before the v-model value is being updated. This is only happening with Phantom, but works as expected everywhere else.</p>
<h3 dir="auto">Vue Version</h3>
<p dir="auto">2.1.10</p>
<h3 dir="auto">Issue Description</h3>
<p dir="auto">Based on other examples I've seen, when embedding a checkbox in a custom component a 'proxy' value has to be used to emulate the native <code class="notranslate">v-model</code> behaviour for a checkbox or radio input.</p>
<p dir="auto">This is particularly important when binding <code class="notranslate">v-model</code> on the custom component to an array as opposed to a boolean.</p>
<p dir="auto">This technique works fine in Firefox and Webkit-based browsers but fails in IE and Edge.</p>
<h3 dir="auto">Demonstration of Issue</h3>
<p dir="auto"><a href="http://jsfiddle.net/andrewcourtice/jgxzbbvv/" rel="nofollow">http://jsfiddle.net/andrewcourtice/jgxzbbvv/</a></p>
<h3 dir="auto">Steps to Reproduce</h3>
<ol dir="auto">
<li>Open the above fiddle in a Firefox or a Webkit-based browser</li>
<li>Check the checkboxes and note the array of selected items being updated correctly</li>
<li>Open the above fiddle in IE or Edge</li>
<li>Check the checkboxes and note the difference in behaviour to step 2</li>
</ol>
<h3 dir="auto">Expected Outcome</h3>
<p dir="auto">The array of selected items (and the raw output) should be updated as each item is checked.</p>
<h3 dir="auto">Actual Outcome</h3>
<p dir="auto">In IE and Edge the raw output is displaying a boolean value and the checked state of the checkboxes is inconsistent.</p>
<p dir="auto">Thanks!</p>