[Vuejs]-Vue – v-model with dynamic select as object key and input as object value

by

0👍

create a object in the scripr as you want
ex -:

data: () => ({
      object:[
         key:'',
         name:''
      ]
}),

And create ui component in the template

<v-row>
  <v-col>
    <v-select v-model="object.key" v-bind:items="['a', 'b', 'c', 'd']"></v-select>
  </v-col>
  <v-col>
    <v-text-field v-model="object.name></v-text-field>
  </v-col>

</v-row>

0👍

you can create a computed property. Look at the syntax to create the object:

{ [this.selectedField]: this.inputField } – now both values are dynamic.

Vue.createApp({
  data() {
    return {
      inputField: 'iam text',
      // select box
      selectedField: 'A',
      options: [
        { text: 'One', value: 'One' },
        { text: 'Two', value: 'Two' },
        { text: 'Three', value: 'Three' }
      ]
    }
  },
  computed: {
    output () {
       return { [this.selectedField]: this.inputField }
    }
  }
}).mount('#demo')
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
<script src="https://unpkg.com/vue@next"></script>

<div id="demo" class="demo">
  <select v-model="selectedField">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <br />
  <input v-model="inputField" />
  <br>
  {{ output }}
</div>

Leave a comment