FormItem 表单值修改了 页面显示未改变,组件属性改变,如何触发重新渲染?

FormItem 值修改了 页面未刷新

也添加了 key 还是不行

问:动态修改数据以后页面怎么刷新

2个回答默认排序 投票数排序
YANG001
YANG001
这家伙很懒,什么也没写~
7月前

>= v2.1.0的版本已经修复此问题,对于旧版本可以使用以下方案解决:

key属性改变时,组件将被整个替换,你也可以理解为重新渲染,其实你应该早就使用过它,因为v-for往往都需要绑定:key="idx"

基于以上特性:

input1: <input v-model="state.value1" />
input2: <input v-model="state.value2" :class="state.value1" :key="state.value1" />

以上的 input2 总是在 input1 值改变时重新渲染,并且新渲染的 input2 的 class="state.value1"

通过key可以轻松的实现重新渲染某个组件触发组件生命周期钩子触发过渡等等,请举一反三、灵活应用,如老哥这样来了个valueKey的就属于离谱的范畴了😂,这本是vue基础,,具体文档在VUE文档

key还能以更花哨的方式赋值,当属性改变时,重新渲染组件:

<tag :data="array" :key="array.toString()" />
<tag :data="object" :key="JSON.stringify(object)" />
momo
momo回复YANG001
这家伙很懒,什么也没写~
7月前

可以给一个解决的示例吗;

YANG001
YANG001回复momo
这家伙很懒,什么也没写~
7月前

这还要示例,你如果不能写代码,请个人呗,这是HTML属性的范畴,这么简单的属性作用大张旗鼓的给你写了一大篇...

momo
momo回复YANG001
这家伙很懒,什么也没写~
7月前

组要是没理解 FormItem 的key 怎么添加

momo
momo回复YANG001
这家伙很懒,什么也没写~
7月前

不是基础差呀!
在原生 for 中 我可以给每一个标签 添加key 但是FormItem组件里面我怎么添加
我的结构是这种
topic_source:{
'国内':'国内',
'国外':'国外'
}

                          <FormItem
                            :input-attr="{clearable:false,valueKey:state}"
                            style="max-width: 300px"
                            label="题目来源" type="select"
                            :data="{content: { ...state.topic_source}}"
                            v-model="ruleForm.topic_source" prop="cognize"
                            placeholder="请选择题目来源"/>
                        
                        <el-form-item prop="cognize" label="题目来源">
                            <el-select clearable  v-model="ruleForm.topic_source"
                                       placeholder="请选择题目来源"
                                       style="max-width: 300px">
                                <el-option
                                    v-for="item in state.topic_source"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
YANG001
YANG001回复momo
这家伙很懒,什么也没写~
7月前

key属性改变时,组件将被整个替换,你也可以理解为重新渲染

组件替换,重新渲染!这不能理解吗?

<FormItem :key="a" />

a改变时,重新渲染FormItem组件,原来的没有了,不要了,删了,根据key换个新的摆在哪儿,并且应用新给的属性,这很难理解吗?

momo
momo回复YANG001
这家伙很懒,什么也没写~
7月前

我刚刚看了一下文档, 弄出来了 我以为FormItem里面封装了 key 这个字段。

momo
momo回复YANG001
这家伙很懒,什么也没写~
7月前

我是写后端的,对前端不是太熟悉😞

YANG001
YANG001回复momo
这家伙很懒,什么也没写~
7月前

这不是FormItem的属性,也不是ba提供的,它是VUE的虚拟dom标识,官方称为vnode算法提示,可以用于任何组件/标签

momo
momo回复YANG001
这家伙很懒,什么也没写~
7月前

好的,理解了 我吧vue 基础好好巩固一下

ipiaobo
ipiaobo
这家伙很懒,什么也没写~
4周前

感谢分享~

请先登录
0
1
1
11