Javascript 设置默认值'；价值'；v-text-field的自定义组件v-model

基本上，我使用的是其他人编写的自定义组件，我想为这个

v-text-field

设置一个默认值，我已经尝试了所有方法来覆盖editem.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>

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

这是一个Vuetify组件，我是一个新的Vue开发人员

总之，如果没有v-model=“editem.color”，什么都不起作用，但是，如果我不设置默认值，什么都不起作用

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

因此，要么我需要将“create”模式的默认值设置为#FF0000十六进制值，要么我需要解析从v-color-picker返回的值，只使用十六进制值而不返回数组。因此，基本上，这一切归结为拦截任一解决方案的editem.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>

{{item.name}

任何帮助都会很好

只是html

的包装

在Vue中，在

s上，

v-model

和

value

是相互排斥的<代码>值仅在没有双向数据绑定时读取（使用

v-model

）

这意味着您只需在

editem

本身中提供默认值，然后再将其传递给

（并删除

default

和

值

）。例如：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
formState:'创建'，
编辑：{
颜色：“#FF0000”
}
})
})

---

我的解决方案与VUE没有什么关系，但希望它能帮助某些人，我的个人状态是您开始寻找其他解决方案

问题是，在“创建”时，颜色选择器返回一个数组，而在编辑时，它返回十六进制值，因此我（可能有点老套）的解决方案是最初为颜色值设置一个默认值，然后在编辑时设置颜色。 但不是用getter和setter来操纵vue变量， 我进入了我的LaravelAPI FormRequest实例，您可以使用

prepareForValidation（）

方法在验证之前准备数据

我这样做：

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

我能够检查数组，如果是数组，则解析出值。可悲的是，我没能得到这份工作，并开始为我工作

---

谢谢

请共享

editem

对象，我认为您应该设置默认值，如

editem:{color:“#000”…}

这就是我的想法。但我想我试过了。我现在下班骑马回家，但到家后我会努力的。这对我来说毫无意义。¯_(ツ)_/''谢谢你的解释！它来自一个自定义组件！我不想每次都将该值设置为'#FF0000'，但就在这一个例子中。我提出的问题本身就相当棘手。但如果我能找出如何覆盖v模型或将数据绑定到它，那么我还可以解决我的其他问题。在这种情况下，使用

computed

在这种情况下，使用

set

和

get

。我添加了一个示例。因此，您实际上是通过一个计算属性编辑一个属性，该属性在传递/检索值之前会对其进行修改。谢谢！您是一个Vuetiful人！您正在保存我的屁股。真的！我尝试改进示例并添加了一个

希望能让它更清晰。

editingItem

只是一个修改

selectedItem

的界面，它会动态添加默认的

颜色。把
selectedItem
想象成一个受保护的道具，
editingItem
就是它的setter和getter（事实上，它们就是这样的）.Getter需要返回对象，setter必须将其作为param。如果使用Typescript，则它们的类型必须匹配。它们都是函数。
protected function prepareForValidation(){
    if(gettype($this->color) == 'array'){
        $this->merge(['color' => $this->color['hex']]);
    }
}