问无法使用Vue和Vuetify将模板文本添加到v-textarea
EN

Stack Overflow用户

提问于 2019-05-10 22:08:55

回答 1查看 874关注 0票数 0

我继承了一个用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和value属性，但什么也看不到。我最初尝试设置text属性，但后来在vuetify.js站点上找到了该documentation。他们甚至有一个simple example，可以做我想做的事情。但是我的实现不起作用。我被难住了！

vue.js

vuetify.js

Stack Overflow用户

回答已采纳

发布于 2019-05-10 22:39:59

您不应该同时设置v-model和value。

一种可能的解决方案是删除v模型并在@input事件中更新incident.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模型，删除value，但您需要设置

this.incident.incidentFreeText='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'

在你的代码中的某个地方。

票数 1

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56079350

复制

相似问题

问无法使用Vue和Vuetify将模板文本添加到v-textarea
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使用Vue和Vuetify将模板文本添加到v-textareaEN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使用Vue和Vuetify将模板文本添加到v-textarea
EN