<h3 dir="auto">Vue.js version</h3>
<p dir="auto">1.0.21</p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div :style=&quot;{backgroundSize:'100%'}&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">:style</span>="<span class="pl-s">{backgroundSize:'100%'}</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What is Expected?</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div style=&quot;background-size:100%;&quot;&gt;&lt;/div&gt;
// or
&lt;div style=&quot;background-size:100% auto;&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">background-size:100%;</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
// or
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">background-size:100% auto;</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What is actually happening?</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div style=&quot;background-size:100% 100%;&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">style</span>="<span class="pl-s">background-size:100% 100%;</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">from css documentation of background-size:<br>
Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. <strong>If only one value is given, the second is set to "auto"</strong></p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Sometimes prop validation error messages are to vague, and one would like to specify his own custom error message, instead of the default "Invalid prop: custom validator check failed for prop" message.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">I suggest supporting the validator to be an object. Instead of:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default {
  name: 'MyComponent',
  props: {
    type: {
      type: String,
      validator: v =&gt; ['positive', 'negative', 'warning', 'info'].includes(v)
    }
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">'MyComponent'</span><span class="pl-kos">,</span>
  <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">type</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-v">String</span><span class="pl-kos">,</span>
      <span class="pl-en">validator</span>: <span class="pl-s1">v</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">[</span><span class="pl-s">'positive'</span><span class="pl-kos">,</span> <span class="pl-s">'negative'</span><span class="pl-kos">,</span> <span class="pl-s">'warning'</span><span class="pl-kos">,</span> <span class="pl-s">'info'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s1">v</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Have the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default {
  name: 'MyComponent',
  props: {
    type: {
      type: String,
      validator: {
        handler: v =&gt; ['positive', 'negative', 'warning', 'info'].includes(v),
        message: &quot;Type must be one of 'positive', 'negative', 'warning', 'info'&quot;
      }
    }
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">'MyComponent'</span><span class="pl-kos">,</span>
  <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">type</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-v">String</span><span class="pl-kos">,</span>
      <span class="pl-c1">validator</span>: <span class="pl-kos">{</span>
        <span class="pl-en">handler</span>: <span class="pl-s1">v</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">[</span><span class="pl-s">'positive'</span><span class="pl-kos">,</span> <span class="pl-s">'negative'</span><span class="pl-kos">,</span> <span class="pl-s">'warning'</span><span class="pl-kos">,</span> <span class="pl-s">'info'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s1">v</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">message</span>: <span class="pl-s">"Type must be one of 'positive', 'negative', 'warning', 'info'"</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>