为v-text-field设置自定义组件v-model的默认'value‘

Question

基本上，我使用的是别人编写的自定义组件，我想为此模型设置一个默认值，并且我已经尝试了所有方法来覆盖editedItem.color v- v-text-field。我想不出来的东西都不管用！

我是一名laravel php开发人员，在这里我真的需要我的堆栈朋友的一些帮助。我正在做一份新工作，我不希望失败。

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

至于数据，当我访问自定义组件时，数据如下：

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

这似乎是非常容易的事情。只需设置一个默认值，并将其发送到API。但是对于v-model，它不会接受v-bind:value或v-bind:default

这是一个Vuetify组件，我是一个newb Vue开发人员。

总而言之，如果没有v-model="editedItem.color"，任何东西都不会工作，但是，如果我不设置这个缺省值，什么都不会工作。

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

因此，要么我需要将'create‘模式的默认值设置为#FF0000十六进制值，要么我需要解析出v颜色选择器的返回值，只使用十六进制值，而不返回数组。因此，从根本上说，这一切都归结为拦截任何一种解决方案的editedItem.color。

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

感谢SOF Fam！

<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>

任何帮助都是最好的！

Answer 1

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

在Vue中，在<input>上，v-model和value是互斥的。只有在没有双向数据绑定(使用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属性值；如果为False值，则为默认值。

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

以下是v-model上Vue文档的相关部分。

为了涵盖所有情况，下面是如何将computed与set和get一起使用，从而允许您映射默认值：

​

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的形式从父级传入时的情况。

Answer 2

我的解决方案与VUE没有什么关系，但希望它能帮助一些人，我达到了一种个人状态，你开始寻找其他解决方案。

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

我这样做了：

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

我能够检查数组，如果是数组，则解析出值。遗憾的是，我不能获得get和set来为我工作。

谢谢!