[英]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-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
属性的值,如果它是虚假的,则使用默认值。
它的要点是:在将其传递给<input>
之前,您必须在绑定到v-model
的实际属性上填充默认值。
这是关于v-model
的 Vue 文档的相关部分。
并且,为了涵盖所有情况,以下是使用set
和get
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.