vue.js - 无法使用 Vue 和 Vuetify 将模板文本添加到 v-textarea
问题描述
我继承了一个用 Vue/Vuetify 编写的现有应用程序,它有一个我正在尝试修改的现有 v-textarea 元素。问题是我们现在想要使用用户可以根据需要编辑的示例文本预填充此元素。我已经尝试向 v-textarea 元素添加value
和placeholder
属性,但没有让示例文本显示在 v-textarea 中。
这是包含麻烦的 v-textarea 的对话框:
<v-dialog v-model="dialogAddComment"
hide-overlay
persistent
max-width="600px">
<v-toolbar card color="blue-grey lighten-4" dense elevation="16">
<v-toolbar-title color='black' class="body-2 ml-3">Add Comment</v-toolbar-title>
<v-spacer></v-spacer>
<v-icon @click.stop="closeDialogAddComment">close</v-icon>
</v-toolbar>
<v-form ref="form" v-model="valid" lazy-validation>
<v-card>
<v-flex>
<v-layout column>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="engagement.allIncidentTypes"
item-text="incidentCategoryText"
item-value="incidentCategoryKey"
label="Category"
:rules="[v => !!v || 'Category is required']"
required
v-model="incident.incidentCategoryKey"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="zeroTo8"
label="Impact (Hours)"
:rules="[v => (v === 0 || v <9) || 'Impact is required']"
required
v-model="incident.numberOfHours"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
v-model="incident.incidentFreeText"
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
></v-textarea>
<!-- -->
</v-flex>
</v-layout>
</v-flex>
<v-card-actions>
<v-spacer/>
<v-btn :disabled="!valid" color="primary" small @click="addIncident">Submit</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>
</v-form>
</v-dialog>
我尝试设置placeholder
andvalue
属性,但什么也没看到。我最初尝试设置一个text
属性,但后来在 vuetify.js 站点上找到了文档。他们甚至有一个简单的例子,正是我想做的。但是我的实现不起作用。我难住了!
解决方案
您不应该同时设置v-model
两者value
。
一种可能的解决方案是删除 v-model 并incident.incidentFreeText
在 @input 事件中更新
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
@input="onInput"
>
</v-textarea>
methods: {
onInput(value) {
this.incident.incidentFreeText = value
}
}
另一种可能的解决方案是保留 v-model, remove value
,但您需要设置
this.incident.incidentFreeText='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
在您的代码中的某处。
推荐阅读
- transactions - 转换为 .net core 3.1 后,当前的 TransactionScope 已完成错误
- file - 在 go 中逐字节处理文件
- mysql - MySQL 使用 WHERE 的结果更新条件(已解决)
- r - 删除重复项,同时优先考虑 R 中不同列中的特定值
- javascript - 在 React Native 中使用异步组件的 Redux
- python - 为什么 numpy ifft 不返回我的原始光谱?
- flutter - 如何在多个小部件中使用相同的块
- python - 在多维numpy数组中选择随机条目的有效方法
- python - 在 conda 中安装 OSMnx 的问题
- python - Python中的三元布尔数学