Vue.js 无法使用Vue和Vuetify将模板文本添加到v-textarea
我继承了一个用Vue/Vuetify编写的现有应用程序,它有一个我正在尝试修改的现有v-textarea元素。问题是,我们现在希望使用示例文本预先填充此元素,用户可以根据自己的需要进行编辑。我尝试将Vue.js 无法使用Vue和Vuetify将模板文本添加到v-textarea,vue.js,vuetify.js,Vue.js,Vuetify.js,我继承了一个用Vue/Vuetify编写的现有应用程序,它有一个我正在尝试修改的现有v-textarea元素。问题是,我们现在希望使用示例文本预先填充此元素,用户可以根据自己的需要进行编辑。我尝试将值和占位符属性添加到v-textarea元素中,但没有得到要在v-textarea中显示的示例文本 以下是包含棘手的v-textarea的对话框: <v-dialog v-model="dialogAddComment" hide-overlay persis
值
和占位符
属性添加到v-textarea元素中,但没有得到要在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>
添加注释
关闭
提交
我尝试设置了
占位符
和值
属性,但没有看到任何结果。我最初尝试设置text
属性,但后来在vuetify.js网站上找到了。他们甚至有一个能做我想做的事情的网站。但我的实现不起作用。我被难住了 您不应同时设置v型
和值
一种可能的解决方案是删除v型并在@input event中更新事件.incidentFreeText
<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-on:change=“onChange”
添加到我的Vue元素中,然后添加了一个onChange
方法来设置此.incident.incidentFreeText
this.incident.incidentFreeText='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'