在動態輸入欄位中管理 v 模型的有效策略
P粉897881626
P粉897881626 2024-02-03 18:06:47
0
1
440

我有一個表單,使用者可以選擇點擊「新增」按鈕並將內容輸入到新欄位。我目前已經動態生成了字段的 v 模型,但我意識到我需要在設定函數中註冊/返回每個字段才能使用它們。

如果我不知道用戶將決定添加多少個字段,如何為不同的輸入字段生成並註冊/返回 v-model?

<div
    v-for="(content, i) in contentFields"
    :key="i"
>
  <div>Content {{ i }}</div>
        <q-input
          :v-model="`contentName_` + i"
          outlined
          type="text"
          dense
        />
 </div></div>

P粉897881626
P粉897881626

全部回覆(1)
P粉163951336

請看以下有簡單動態 v 模型的程式碼片段:

new Vue({
  el: "#demo",
  data() {
    return {
      contentFields: [{name: '', desc: ''}]
    }
  },
  methods: {
    addInput() {
      let newI = this.contentFields.length
      this.contentFields.push({name: '', desc: ''})
    },
    setD() {
      console.log(this.contentFields)
    }
  }
})
sssccc
Content {{ i }}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板