Version 5.0.0 Reproduction link <p dir="au

As a follow up, here is the code we are using: <div class="snippet-clipboard-conte

v-model can only be used on <input>, <textarea> and <select> elements. about rollup-plugin-vue HOT 1 OPEN

codebykyle commented on June 16, 2024 1

v-model can only be used on ,

and <select> elements.<p>from rollup-plugin-vue.</p></section>
</section>

</article>

<article>
  <h2 class="h2">Comments (1)</h2>
  
    
    
<section class="issue-comment">
  <section id="927022471" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/26160129?v=4" alt="codebykyle avatar" />
    <a class="issue-username" href="/codebykyle">codebykyle</a>
    <span class="issue-time"> commented on June 16, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">As a follow up, here is the code we are using:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        <form action="" @submit.prevent="">
            <div class="" v-for="(field, index) in generateFormFromFields()">
                <div
                        class=""
                        ref="field"
                        :field="field"
                        :key="index"
                        :is="getFormFieldComponent(field)"
                        :value="getFieldValue(field)"
                        :options="getFormFieldOptions(field)"
                        :errors="getFormFieldErrors(field)"
                        :model-data="getModelData()"
                        @change="setFormValues(getFormValues())"
                        @bulk-change="bulkFieldChange"
                        @field-submitted="formSubmitted"
                        @input="() => setFormFields(localValues)"
                        v-model="localValues[field.field]">
                </div>
            </div>
        </form>"><pre class="notranslate"><code class="notranslate">        <form action="" @submit.prevent="">
            <div class="" v-for="(field, index) in generateFormFromFields()">
                <div
                        class=""
                        ref="field"
                        :field="field"
                        :key="index"
                        :is="getFormFieldComponent(field)"
                        :value="getFieldValue(field)"
                        :options="getFormFieldOptions(field)"
                        :errors="getFormFieldErrors(field)"
                        :model-data="getModelData()"
                        @change="setFormValues(getFormValues())"
                        @bulk-change="bulkFieldChange"
                        @field-submitted="formSubmitted"
                        @input="() => setFormFields(localValues)"
                        v-model="localValues[field.field]">
                </div>
            </div>
        </form>
</code></pre></div>
<p dir="auto">This is used to generate a procedural form.</p>
<p dir="auto">The initial resulting error is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: v-model can only be used on <input>, <textarea> and <select> elements."><pre class="notranslate"><code class="notranslate">Error: v-model can only be used on <input>, <textarea> and <select> elements.
</code></pre></div>
<p dir="auto">Being cheeky, I changed this to an input, as the component is mounted with <code class="notranslate">:is</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        <form action="" @submit.prevent="">
            <div class="" v-for="(field, index) in generateFormFromFields()">
                <input
                        class=""
                        ref="field"
                        :field="field"
                        :key="index"
                        :is="getFormFieldComponent(field)"
                        :value="getFieldValue(field)"
                        :options="getFormFieldOptions(field)"
                        :errors="getFormFieldErrors(field)"
                        :model-data="getModelData()"
                        @change="setFormValues(getFormValues())"
                        @bulk-change="bulkFieldChange"
                        @field-submitted="formSubmitted"
                        @input="() => setFormFields(localValues)"
                        v-model="localValues[field.field]" />
            </div>
        </form>"><pre class="notranslate"><code class="notranslate">        <form action="" @submit.prevent="">
            <div class="" v-for="(field, index) in generateFormFromFields()">
                <input
                        class=""
                        ref="field"
                        :field="field"
                        :key="index"
                        :is="getFormFieldComponent(field)"
                        :value="getFieldValue(field)"
                        :options="getFormFieldOptions(field)"
                        :errors="getFormFieldErrors(field)"
                        :model-data="getModelData()"
                        @change="setFormValues(getFormValues())"
                        @bulk-change="bulkFieldChange"
                        @field-submitted="formSubmitted"
                        @input="() => setFormFields(localValues)"
                        v-model="localValues[field.field]" />
            </div>
        </form>
</code></pre></div>
<p dir="auto">which resulted in:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[!] (plugin vue) Error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
src\components\form\types\dynamic-form.vue (11:25)
:value="getFieldValue(field)"
Error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior."><pre class="notranslate"><code class="notranslate">[!] (plugin vue) Error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
src\components\form\types\dynamic-form.vue (11:25)
:value="getFieldValue(field)"
Error: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
</code></pre></div>
<p dir="auto">Which I do not believe to be correct, either. The code itself here works OK.</p><p>from rollup-plugin-vue.</p></section>
</section>

</article>

<section>
  <h2 class="h2">Related Issues (20)</h2>
  <div class="issue">
    <ul>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/431">ESM output of vue class components not tree-shakeable in webpack</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/432">Option to ignore <Style> completely</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/434">Can we process generated string?</a> 
          
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/435">__file property is being exposed no matter what the value of the exposeFilename option is</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/440">inject CSS in shadowdom on v6 of the plugin</a> 
          
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/444">Unable to extract transformed CSS</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/445">@vue/runtime-dom is not resolved</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/446">Component packaging using setup syntax is not supported, logical decomposition of setup</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/447">Component packaging using setup syntax is not supported, logical decomposition of setup</a> 
          
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/448">Seems this doesn not work with Vue 3</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/452">[!] (plugin vue) TypeError: Cannot read property 'refSugar' of undefined</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/453">TSX Can not be built with Rollup (Vue 3)</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/455">Error: v-model can only be used on <input>, <textarea> and <select> elements.</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/457">Bump rollup-plugin-postcss to v4</a> 
          
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/458">Fail to add the attribute scope id "v-data-xxx" when mounting a rollup vue2 component</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/459">TypeError at build for example Typescript project w/ latest packages</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/460">Cant import javascript or other vue files into vue single file components</a> 
          
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/461"> generated files cannot be used in vue-cli when  use the composition api in  a separate file  while in vite project there is no error</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/vuejs/rollup-plugin-vue/issues/462">rollup-plugin-vue@next error handle not compatible with @vue/compiler-sfc@3.2.26</a> 
          
        </li>
      
    </ul>
  </div>
</section>

</main>
        <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color">
          <div class="w-full md:w-60 h-0.5"></div>
          <section>
            
            
            
<h2 class="h2 py-3.5">Recommend Projects</h2>
            <ul>
              <li class="mb-4">
                
              </li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/facebook/react">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png"
        alt="React photo"
      />
      
      React
    </a>
  </h3>
  <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/vuejs/vue">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67"
        alt="Vue.js photo"
      />
      
      Vue.js
    </a>
  </h3>
  <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/microsoft/TypeScript">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://www.typescriptlang.org/favicon-32x32.png"
        alt="Typescript photo"
      />
      
      Typescript
    </a>
  </h3>
  <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/tensorflow/tensorflow">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67"
        alt="TensorFlow photo"
      />
      
      TensorFlow
    </a>
  </h3>
  <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/django/django">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4"
        alt="Django photo"
      />
      
      Django
    </a>
  </h3>
  <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/laravel/laravel">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://laravel.com/img/logomark.min.svg"
        alt="Laravel photo"
      />
      
      Laravel
    </a>
  </h3>
  <p class="article-more pt-1">A PHP framework for web artisans</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/d3/d3">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667"
        alt="D3 photo"
      />
      
      D3
    </a>
  </h3>
  <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p>
</article>

</li>
              
              <li>
                <div>
                  
  
                </div>
              </li>
            </ul>
          </section>

<section>
            
            
<h2 class="h2 py-3.5">Recommend Topics</h2>
            <ul>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/javascript">
      
      javascript
    </a>
  </h3>
  <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/web">
      
      web
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/server">
      
      server
    </a>
  </h3>
  <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/machine-learning">
      
      Machine learning
    </a>
  </h3>
  <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/visualization">
      
      Visualization
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about visualization, use data art</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/game">
      
      Game
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p>
</article>

</li>
              
              <li>
                
  
              </li>
            </ul>
          </section>

<section>
            
            
<h2 class="h2 py-3.5">Recommend Org</h2>
            <ul>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/facebook">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/69631?v=4"
        alt="Facebook photo"
      />
      
      Facebook
    </a>
  </h3>
  <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/microsoft">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/6154722?v=4"
        alt="Microsoft photo"
      />
      
      Microsoft
    </a>
  </h3>
  <p class="article-more pt-1">Open source projects and samples from Microsoft.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/google">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1342004?v=4"
        alt="Google photo"
      />
      
      Google
    </a>
  </h3>
  <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/alibaba">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1961952?v=4"
        alt="Alibaba photo"
      />
      
      Alibaba
    </a>
  </h3>
  <p class="article-more pt-1">Alibaba Open Source for everyone</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/d3">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1562726?v=4"
        alt="D3 photo"
      />
      
      D3
    </a>
  </h3>
  <p class="article-more pt-1">Data-Driven Documents codes.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/tencent">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/18461506?v=4"
        alt="Tencent photo"
      />
      
      Tencent
    </a>
  </h3>
  <p class="article-more pt-1">China tencent open source team.</p>
</article>

</li>
              
              <li>
                
  
              </li>
            </ul>
          </section>
          
        </section>
      </div>
    </div>

<footer class="sizeing text-xs text-center p-5">
  <div>Friends: 
    <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a>
  </div>
  Copyright © 2024 Giter Club  ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a>
</footer>
  </body>
</html>