为v文本字段

如何解决为v文本字段

基本上，我正在使用别人编写的自定义组件，并且我想为此v-text-field设置默认值，并且我尝试了一切以覆盖editedItem.color v模型。 我无法提出的任何建议都将起作用！

我是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模型，它将不会接受v-bind：value或v-bind：default

这是Vuetify组件，我是新手Vue开发人员。

因此，在摘要中，没有v-model =“ editedItem.color”将无法正常工作，但是，如果我未设置默认值，则将无法正常工作。

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

所以我需要将“创建”模式的默认值设置为＃FF0000十六进制值，或者我需要从v-color-picker中解析出返回的值，而只使用十六进制值而不返回数组。因此，基本上所有这些都归结为截取两种解决方案的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>

任何帮助都会很棒！

解决方法

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

在Vue中，<input>和v-model是互斥的。仅当您没有双向数据绑定（使用value）时，才会读取value。

这意味着您需要做的就是在v-model本身中提供默认值，然后再将其传递给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>来自另一个组件或来自外部API，则您必须拦截它，并在editedItem不存在的情况下填充其默认值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属性的值；如果为false，则使用默认值。 / p>

要点是：在将默认值传递到color之前，必须在绑定到v-model的实际属性上填充默认值。

---

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

---

而且，为了涵盖所有情况，以下是将<input>与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>开头的情况。

,

我的解决方案与VUE无关，但是希望它可以对某人有所帮助，我发现您开始寻求其他解决方案时处于个人状态。

问题在于，在“创建”时，颜色选择器将返回一个数组，而在编辑时，颜色选择器将返回十六进制值，所以我的解决方案是为颜色值设置默认值首先，然后在编辑时设置颜色。 但是，与其使用getter和setter来操纵vue var， 我进入了Laravel API FormRequest实例，您可以使用prepareForValidation()方法在验证之前准备数据。

我这样做了

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

我能够检查一个数组，如果是数组，则解析出该值。可悲的是，我没办法为我工作。

谢谢！