vue項目中input輸入框輸入不了值如何解決

本文小編為大家詳細介紹“vue項目中input輸入框輸入不了值如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue項目中input輸入框輸入不了值如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

編輯頁面v-model 綁定的input 輸入框輸入不了值

原因

• 對象 會遞歸遍歷data中定義的所有變量 所以如果沒定義就監聽不到變化

• 數組只有幾個數組方法添加的會響應 通過下標不響應（push,pop會不響應）

解決方案

在獲取到后端的數據后，定義一個新的對象，把后端數值接收到這個新的對象中，再把新的對象賦值給 data里面定義的對象

    if(res.data.success == true){
        let resForm={}  //重新定義一個對象
         resForm={...res.data.data.activityInfo}
         resForm.activeTime=[res.data.data.activityInfo.startTime,res.data.data.activityInfo.endTime],                  
         resForm.listOne=res.data.data.listOne
         resForm.listTwo=res.data.data.listTwo
         this.formData={...resForm}  //把定義的對象賦值給data里面定義的對象
         console.log(this.formData,2121212121)
  }

vue技能點--el-input輸入框無法輸入、無法修改

現象

使用Vue框架，發現輸入框<input>或者<el-input>的內容無法修改，也無法輸入。

解決方案

首先，檢查綁定方式，應該使用v-model，有時候會誤用:value，導致無法修改。

其次，如果是綁定數組元素等復雜對象，可以在輸入框添加@input="onInput()"，然后在methods中添加方法：

      onInput() {
      this.$forceUpdate();
    },

forceUpdate用來強制渲染，避免data中對象層次太深，Vue框架不自動渲染的情況。

讀到這里，這篇“vue項目中input輸入框輸入不了值如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。