StackGenVis/frontend/node_modules/babel-plugin-jsx-v-model/test/snapshots/test.js.md

# Snapshot report for `test/test.js`

The actual snapshot is saved in `test.js.snap`.

Generated by [AVA](https://ava.li).

## Error: h3

> Initial code

    `␊
      <h3␊
        v-model={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can not use "h3" with v-model'

## Error: input[type="checkbox",v-model:trim]

> Initial code

    `␊
      <input␊
        type="checkbox"␊
        v-model:trim={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can only use number modifier with input[type="checkbox"]'

## Error: input[type="file",v-model]

> Initial code

    `␊
      <input␊
        type="file"␊
        v-model={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can not use "file" type with v-model'

## Error: input[type="radio",v-model:trim]

> Initial code

    `␊
      <input␊
        type="radio"␊
        v-model:trim={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can only use number modifier with input[type="radio"]'

## Error: input[type={dynamic}, v-model]

> Initial code

    `␊
      <input␊
        type={e}␊
        v-model={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can not use dynamic type with v-model'

## Error: input[v-model, v-model]

> Initial code

    `␊
      <input␊
        v-model={a.b}␊
        v-model={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can not have multiple v-model directives on a single element'

## Error: input[v-model:invalidModifier]

> Initial code

    `␊
      <input␊
        v-model:invalidModifier={a.b}␊
      />␊
    `

> Error mesage

    'unknown: v-model does not support "invalidModifier" modifier'

## Error: input[v-model="string literal"]

> Initial code

    `␊
      <input␊
        v-model="string literal"␊
      />␊
    `

> Error mesage

    'unknown: you should use JSX Expression with v-model'

## Error: input[v-model={identifier}]

> Initial code

    `␊
      <input␊
        v-model={identifier}␊
      />␊
    `

> Error mesage

    'unknown: you should use MemberExpression with v-model'

## Error: select[v-model:trim]

> Initial code

    `␊
      <select␊
        v-model:trim={a.b}␊
      />␊
    `

> Error mesage

    'unknown: you can only use number modifier with <select/ >'

## Ignores namespaced attributes

> Initial code

    `␊
      <input␊
        onClick:prevent={hey}␊
      />␊
    `

> Compiled code

    '<input onClick:prevent={hey} />;'

## custom-element[v-model:number]

> Initial code

    `␊
      <custom-element␊
        v-model:number={a.b}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <custom-element value={a.b} onInput={$$v => {␊
      a.b = _this._n($$v);␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## custom-element[v-model:trim]

> Initial code

    `␊
      <custom-element␊
        v-model:trim={a.b}␊
      />␊
    `

> Compiled code

    `<custom-element value={a.b} onInput={$$v => {␊
      a.b = $$v.trim();␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## custom-element[v-model]

> Initial code

    `␊
      <custom-element␊
        v-model={a.b}␊
      />␊
    `

> Compiled code

    `<custom-element value={a.b} onInput={$$v => {␊
      a.b = $$v;␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## input[type="checkbox", v-model]

> Initial code

    `␊
      <input␊
        type="checkbox"␊
        v-model={a.b}␊
        {...spreadForCoverage}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <input type="checkbox" checked={Array.isArray(a.b) ? this._i(a.b, null) > -1 : a.b} on__c={$event => {␊
      const $$a = a.b,␊
            $$el = $event.target,␊
            $$c = $$el.checked ? true : false;␊
    ␊
      if (Array.isArray($$a)) {␊
        const $$v = null,␊
              $$i = _this._i($$a, $$v);␊
    ␊
        if ($$el.checked) {␊
          $$i < 0 && (a.b = $$a.concat($$v));␊
        } else {␊
          $$i > -1 && (a.b = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));␊
        }␊
      } else {␊
        a.b = $$c;␊
      }␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} {...spreadForCoverage} />;`

## input[type="checkbox", value="forArray", true-value={{hello: true}}, false-value={{hello: false}}, v-model:number]

> Initial code

    `␊
      <input␊
        type="checkbox"␊
        v-model:number={a.b}␊
        value="forArray"␊
        true-value={{hello: true}}␊
        false-value={{hello: false}}␊
        {...spreadForCoverage}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <input type="checkbox" checked={Array.isArray(a.b) ? this._i(a.b, "forArray") > -1 : this._q(a.b, { hello: true })} on__c={$event => {␊
      const $$a = a.b,␊
            $$el = $event.target,␊
            $$c = $$el.checked ? { hello: true } : { hello: false };␊
    ␊
      if (Array.isArray($$a)) {␊
        const $$v = _this._n("forArray"),␊
              $$i = _this._i($$a, $$v);␊
    ␊
        if ($$el.checked) {␊
          $$i < 0 && (a.b = $$a.concat($$v));␊
        } else {␊
          $$i > -1 && (a.b = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));␊
        }␊
      } else {␊
        a.b = $$c;␊
      }␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} {...spreadForCoverage} />;`

## input[type="radio", v-model]

> Initial code

    `␊
      <input␊
        type="radio"␊
        v-model={a.b}␊
        {...spreadForCoverage}␊
      />␊
    `

> Compiled code

    `<input type="radio" checked={this._q(a.b, true)} on__c={$event => {␊
      a.b = true;␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} {...spreadForCoverage} />;`

## input[type="radio", value="101", v-model:number]

> Initial code

    `␊
      <input␊
        type="radio"␊
        value="101"␊
        v-model:number={a.b}␊
        {...spreadForCoverage}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <input type="radio" checked={this._q(a.b, "101")} on__c={$event => {␊
      a.b = _this._n("101");␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} {...spreadForCoverage} />;`

## input[type="range", v-model]

> Initial code

    `␊
      <input␊
        type="range"␊
        v-model={a.b}␊
      />␊
    `

> Compiled code

    `<input type="range" domPropsValue={a.b} on__r={$event => {␊
      a.b = $event.target.value;␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## input[v-model:lazy]

> Initial code

    `␊
      <input␊
        v-model:lazy={a.b}␊
      />␊
    `

> Compiled code

    `<input domPropsValue={a.b} onChange={$event => {␊
      a.b = $event.target.value;␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## input[v-model:number]

> Initial code

    `␊
      <input␊
        v-model:number={a.b}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <input domPropsValue={a.b} onInput={$event => {␊
      if ($event.target.composing) return;␊
      a.b = _this._n($event.target.value);␊
    }} onBlur={() => _this.$forceUpdate()} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## input[v-model:trim]

> Initial code

    `␊
      <input␊
        v-model:trim={a.b}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <input domPropsValue={a.b} onInput={$event => {␊
      if ($event.target.composing) return;␊
      a.b = $event.target.value.trim();␊
    }} onBlur={() => _this.$forceUpdate()} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## input[v-model={a.b[c.d[e]]}]

> Initial code

    `␊
      <input␊
        v-model={a.b[c.d[e]]}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <input domPropsValue={a.b[c.d[e]]} onInput={$event => {␊
      if ($event.target.composing) return;␊
    ␊
      _this.$set(a.b, c.d[e], $event.target.value);␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b[c.d[e]]␊
      }]␊
    }} />;`

## input[v-model]

> Initial code

    `␊
      <input␊
        v-model={a.b}␊
      />␊
    `

> Compiled code

    `<input domPropsValue={a.b} onInput={$event => {␊
      if ($event.target.composing) return;␊
      a.b = $event.target.value;␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## select

> Initial code

    `␊
      <select␊
        v-model={a.b}␊
      />␊
    `

> Compiled code

    `<select domPropsValue={a.b} onChange={$event => {␊
      const $$selectedVal = Array.prototype.filter.call($event.target.options, o => o.selected).map(o => "_value" in o ? o._value : o.value);␊
      a.b = $event.target.multiple ? $$selectedVal : $$selectedVal[0];␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## select[v-model:number]

> Initial code

    `␊
      <select␊
        v-model:number={a.b}␊
      />␊
    `

> Compiled code

    `var _this = this;␊
    ␊
    <select domPropsValue={a.b} onChange={$event => {␊
      const $$selectedVal = Array.prototype.filter.call($event.target.options, o => o.selected).map(o => _this._n("_value" in o ? o._value : o.value));␊
      a.b = $event.target.multiple ? $$selectedVal : $$selectedVal[0];␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`

## textarea[v-model]

> Initial code

    `␊
      <textarea␊
        v-model={a.b}␊
      />␊
    `

> Compiled code

    `<textarea domPropsValue={a.b} onInput={$event => {␊
      if ($event.target.composing) return;␊
      a.b = $event.target.value;␊
    }} {...{␊
      directives: [{␊
        name: "model",␊
        value: a.b␊
      }]␊
    }} />;`