I have html input element with default value. I also have dropdown element. The problem is when I have some value typed in input and change/select the dropdown option, the input value resets to default one. How do I stop this from happening?

The problem is with v-model, if I remove it, it works as expected code snippet.

     <template>
                     <label for="name" class=""
                        >Name
                        <span class="">*</span>
                      </label>
                      <input
                        type="text"
                        class=""
                        placeholder="Name"
                        :value="defaultName"
                      />
     <select
                  v-model="myValue"
                  class=""
                  open-direction="bottom"
                  placeholder="Select" >
                  <option v-for="option in ['one', 'two', 'three']" v-bind:key="option">
                    {{ option }}
                  </option>
    </select>
        </template>
        <script>
        export default {
          data: function() {
            return {
        myValue: '',
        defaultName: 'My Name'
            }
        
        }
</script>

Looks like the problem is with combining v-model and :value

CodePudding user response：

Try this code.

new Vue({
  el: "#app",
  data() {
    return {lights: true,
    test:["q","a"],
      myValue: '',
        defaultName: 'My Name',
    optionss:['one', 'two', 'three']
    };
  }
});


<div id="app">  
  <input
                        type="text"
                        class=""
                        placeholder="Name"
                        v-model="defaultName"
                      />
     <select
                  v-model="myValue"
                  class=""
                  open-direction="bottom"
                  placeholder="Select" >
                  </option> 
           <option v-for="options in optionss" :value="options">{{ options }}</option>

    </select>
  
  {{myValue}} {{defaultName}}
</div>

codepen - https://codepen.io/Pratik__007/pen/dyzZZjJ