[Vuejs]-How to have manage a prop in an html form in Vue.js / infinite loop prevention via computed property

by

0👍

I think you are looking for something like this. See docs for .sync

Vue.component('signup-input',{
  props:['placeholder','err','initialValue'],
  template:`
  <label>
    <div class='signup-font'>Company Name Within Component</div>
      <input @focus="err = null" v-model="localValue" :placeholder="placeholder" 
       @input="$emit('update:initialValue', localValue)"
        size="30" type="text" v-bind:class="{'no-margin error': err }" />
      <label class="error copy-error" v-if="err">
        {{err}}
      </label>
   </label>
  `,
  data() {
    return {
      localValue: this.initialValue
   }
  }
})

var app7 = new Vue({
  el: '#signup',
  template: `
    <div id="page-bg">
      <signup-input :placeholder="companyName.placeholder" :err="companyName.err" :initialValue="companyName.value"></signup-input>

      <label for="company_name">
        <div class='signup-font'>Company Name</div>
          <input @focus="companyName.err = null" placeholder="My Company" v-model.sync="companyName.value" size="30" type="text" v-bind:class="{'no-margin error': companyName.err }" />
          <label class="error copy-error" v-if="companyName.err">
            {{companyName.err}}
          </label>
       </label>

Leave a comment