快捷導(dǎo)航

vue2和el-input無法修改和寫入并且不報錯的解決方案

更新時間：2024年07月25日 12:08:10 作者：最難不過堅(jiān)持丶淵潔

這篇文章主要介紹了vue2和el-input無法修改和寫入并且不報錯的解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一. 業(yè)務(wù)場景描述

在我所在的業(yè)務(wù)場景中。我嵌套了多層匿名子組件，用來展示某條數(shù)據(jù)的不同業(yè)務(wù)

如上圖在基本情況簡介中有數(shù)個屬性表單。
我如下遍歷

    <el-table
      v-loading="loading"
      :data="xunchaDataList"
      @expand-change="expandRow"
      @selection-change="handleSelectionChange">
      <el-table-column type="expand">
      		<template #default="props">
      		.............
      			<el-tab-pane label="基本情況簡介" name="introduction">
      				<template v-if="props.row.countryType === '村社區(qū)'">
      				............
      				     <div v-if="String(props.row.country_introducts[item.key]).length <= 15">
                          <el-input
                            :readonly="isOnlyRead"
                            :placeholder="props.row.country_introducts[item.key]"
                            v-model="props.row.country_introducts[item.key]"/>
                        </div>
					</template>
      				<template v-else> 暫無數(shù)據(jù)</template>
      			</el-tab-pane>
      		</template>
      </el-table-column>
	</el-table>

上述內(nèi)容中經(jīng)測試，數(shù)據(jù)回顯異常，程序不報錯，無法顯示輸入變化，但是數(shù)據(jù)可以被正常修改。

二. 原因分析

v-model="props.row.country_introducts[item.key]" 這里存在多個問題：

vue規(guī)范中子組件不能直接被修改，保證了單向數(shù)據(jù)流，避免了數(shù)據(jù)的混亂與不可預(yù)測性。但經(jīng)測試是可以修改，但是無法回顯罷了。建議不要這樣做。vue無法監(jiān)聽動態(tài)屬性，country_introducts[item.key]是不可預(yù)測的，沒有在vue初始化時和vue綁定，vue無法感知動態(tài)新增的屬性變化。