Vue - v-model 動態 select 作為 object 鍵和輸入作為 object 值

Question

我有一個動態行和 2 列的表單。 左列是 select 框，右列是輸入字段。 我需要將 select 值保存為 object 鍵，並將輸入值保存為我的 Z8A5DA52ED126441A8AAZE 的 object 值。 我想我現在腦子有問題..有人可以幫幫我嗎？

Answer 1

根據需要在腳本中創建 object -：

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

並在模板中創建ui組件

<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>

Answer 2

您可以創建一個計算屬性。 查看創建 object 的語法：

{ [this.selectedField]: this.inputField } - 現在兩個值都是動態的。

 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>