繁体   English   中英

为 v-text-field 设置自定义组件 v-model 的默认“值”

[英]Set default 'value' of custom Component v-model for v-text-field

基本上,我正在使用其他人编写的自定义组件,并且我想为此v-text-field设置一个默认值,并且我已经尝试了一切来覆盖editedItem.color v-model。 我想不出的任何东西都行不通!

我是 laravel php 开发人员,在这里我真的可以从我的堆栈朋友那里得到一些帮助。 我有一份新工作,我不希望失败。

<div v-if="formState === 'create'">
  <v-text-field
    v-model="editedItem.color"
    :default="'#FF0000'"
    :value="'#FF0000'"
    :disabled="true"
    label="Color*"
   />
</div>

就数据而言,当我 go 自定义组件时,数据如下:

  data: () => ({
    formState: 'create',
    loading: false,
    items: [],
    editedItem: {},
    selectedItems: [],
  }),

这看起来应该很容易。 只需设置一个默认值,然后将其发送到 API。 但是对于 v-model,它不会接受 v-bind:value 或 v-bind:default

这是一个 Vuetify 组件,我是一个新手 Vue 开发人员。

因此,总而言之,没有 v-model="editedItem.color" 将无法正常工作,但是,如果我不设置该默认值,将无法正常工作。

问题是颜色选择器返回一个数组,我们不需要它返回一个数组。

因此,要么我需要将“创建”模式的默认值设置为 #FF0000 十六进制值,要么我需要解析从 v-color-picker 中返回的值,并且只使用十六进制值而不返回数组。 所以基本上这一切都归结为截取任一解决方案的editedItem.color。

这是我实现自定义组件的完整页面/tags/index.vue 页面。

感谢 SOF 家族!


<template>
  <work-custom-table
    v-model="headers"
    :routes="routes"
    :title="title"
    settings-key="crud.table"
    sort-by="name"
    allow-merge
  >
    <template #item.preview="{ item }">
      <v-chip :color="item.color">{{ item.name }}</v-chip>
    </template>
    <template #form="{editedItem, formState}">
      <v-row>
        <v-col>
          <v-text-field
            v-model="editedItem.name"
            :disabled="formState === 'view'"
            :rules="[$rules.required]"
            label="Name*"
            hint="*Required"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <v-text-field
            v-model="editedItem.description"
            :disabled="formState === 'view'"
            :rules="[$rules.required]"
            label="Description"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <div v-if="formState === 'create'">
            <v-text-field
              v-model="editedItem.color"
              :disabled="true"
              label="Color*"
            />
          </div>
          <div v-else>
            <v-color-picker
              id="tag-color"
              v-model="editedItem.color"
              :default="'#FF0000'"
              :disabled="formState === 'view'"
              class="elevation-0"
              label="Color*"
              hint="*Required"
              mode="hexa"
              hide-canvas
            />
          </div>
        </v-col>
      </v-row>
    </template>
  </work-custom-table>
</template>

任何帮助都会很棒!

<v-text-field>只是 html <input>的包装。

而在 Vue 中,在<input>上, v-modelvalue是互斥的。 仅当您没有双向数据绑定(使用v-model )时才读取value

这意味着您需要做的就是在editedItem本身中提供默认值,然后将其传递给<v-text-input> (并删除default & value )。 例子:

 new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ formState: 'create', editedItem: { color: '#FF0000' } }) })
 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <div v-if="formState === 'create'"> <v-text-field v-model="editedItem.color":disabled="true" label="Color*" /> </div> </div>

显然,如果editedItem来自另一个组件或来自外部API,如果color没有真值,则必须截取它并在其上填充color的默认值。 一个通用的例子:

methods: {
  getEditedItemFromApi() {
    this.$http.get('some/api/url')
      .then(r => this.editedItem = ({ 
        ...r.data,
        // assumming the API returns the editingItem object
        color: r.data.color || '#FF0000'
      }));
 }
}

(我们正在解构响应数据并将color属性添加到其所有现有属性中,如果它是真实的,则使用它自己的color属性的值,如果它是虚假的,则使用默认值。

它的要点是:在将其传递给<input>之前,您必须在绑定到v-model的实际属性上填充默认值。


这是关于v-model的 Vue 文档的相关部分。


并且,为了涵盖所有情况,以下是使用setget computed的方法,允许您使用 map 默认值:

 Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: '#app', data: () => ({ items: [ { id: 'one', color: 'black' }, { id: 'two' } ], selectedItem: null }), computed: { editingItem: { get() { return {...this.selectedItem, color: this.selectedItem?.color || '#FF0000' }; }, set(item) { this.selectedItem = item; } } } })
 .flexer { display: flex; align-items: center; }.flexer span { width: 1em; height: 1em; border: 3px solid; border-radius: 50%; margin-left: .5rem; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select v-model="selectedItem"> <option:value="null">Select item</option> <option v-for="item in items":value="item">{{item.id}}</option> </select> <div class="flexer" v-if="selectedItem"> <input v-model="editingItem.color":disabled="true" /> <span:style="{ borderColor: editingItem.color }" /> </div> <pre v-html="{ selectedItem, editingItem }" /> </div>

这也适用于作为prop来自父母的情况。

我的解决方案与 VUE 几乎没有关系,但希望它可以帮助某人,我找到了个人 state,您开始寻找其他解决方案。

问题是,在“创建”时,颜色选择器返回了一个数组,在编辑时,它返回了十六进制值,所以我(可能有点老套)的解决方案是最初为颜色值设置一个默认值,并且然后在编辑时设置颜色。 但是,我没有使用 getter 和 setter 操作 vue 变量,而是进入了我的 Laravel API FormRequest 实例,您可以使用prepareForValidation()方法在验证之前准备数据。

我这样做了:

protected function prepareForValidation(){
    if(gettype($this->color) == 'array'){
        $this->merge(['color' => $this->color['hex']]);
    }
}

我能够检查一个数组,如果是数组,则解析出该值。 可悲的是,我无法获得并设置为我工作。

谢谢!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM