前端代碼是這樣,通過循環將dbpmInfo的值給傳遞進去。
<el-form label-width="140px">
<el-form-item
v-for="(dbpmInfo,index) in tabMain"
v-show=" dbpmInfo.cur.indexOf(tabPosition) > -1"
:key="index"
label="temp"
>
<!-- 作用域插槽,綁定數據在插槽展示 -->
<span slot="label">{{ dbpmInfo.name }}</span>
<el-input
type="text"
v-show=" dbpmInfo.cur.indexOf(tabPosition) > -1"
style="width:200px"
:model="dbpmInfo.value"
></el-input>
</el-form-item>
</el-form>
但是用v-model雙向綁定之後,在前端頁面就不能輸入值了。
export default {
data() {
return {
tabPosition: '0',
tabTitle: [
'啓動任務',
'一鍵完成任務',
'指定場景完成任務',
'一鍵結束任務'
],
tabMain: [
{ name: '輸入場景id', cur: '0,1', value: '5' },
{ name: '輸入商家id', cur: '0,1,3', value: '1' },
{ name: '輸入門店id', cur: '0,1', value: '12' },
{ name: '選擇人員類型', cur: '0,1,3', value: '' },
{ name: '輸入人員ID或崗位ID', cur: '0,1,3', value: '' },
{ name: '可輸入崗位屬性', cur: '0,1', value: '' },
{ name: '輸入生成任務條數', cur: '1', value: '' },
{ name: '指定完成節點數', cur: '1', value: '' },
{ name: '指定判定條件', cur: '0,1', value: '' }
]
}
},
methods: {
changeTab(index) {
console.log('index:', index)
this.tabPosition = index
},
}
}
百度了很久,找了很多答案,最高票的答案就是 this.$forceUpdate(),說的是組件嵌套太深入了,沒有辦法渲染。我試了這樣的解決方案各種方式,但是都沒有解決我的問題;
幸好我昨天讀了stack flow 的如何提好一個問題的文檔
如何優雅的再stack flow 提出技術問題
我在嘗試各種方法之後,百度和google 都不行的情況下,去
element-ui文檔
再次重新看了一遍文檔,看了三遍之後,發現文檔首頁赫然寫着幾個大字!
不支持v-model 修飾符,什麼是v-model修飾符?:model?
我將input 的表達式改成 v-model之後一切正常。
究其原因,還是基礎不牢,之前看視頻,以爲v-model 和:model沒有任何區別,區別就是":" 是簡寫!
以後有問題還是先看文檔,再百度。不能無腦百度,無腦嘗試。