解决:Vue中给input框手动赋值,视图却不更新

如下示例:

<a-form layout="vertical">
    <a-row :gutter="16">
        <a-col :span="24">
            <a-form-item label="名称">
                <a-input v-model="helloForm.name" placeholder="请输入名称"/>
            </a-form-item>
        </a-col>
    </a-row>
    <a-row :gutter="16">
        <a-col :span="24">
            <a-form-item label="描述">
                <a-input v-model="helloForm.description" placeholder="请输入描述"/>
            </a-form-item>
        </a-col>
    </a-row>
</a-form>

export default {
  name: ‘helloFormDemo‘,
  data () {
    return {
      helloForm: {}
    }
  },
  methods: {
    handleEditHelloForm () {
        // 模拟编辑功能需要数据回显
        this.helloForm.name = ‘hello 我是helloForm中的name值‘
        this.helloForm.description = ‘我是一大段描述,此处省略很多字‘
    }
  }
}

如此这样,表单虽然值回显的但是确实无法修改input框中的值的。

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

由此Vue实例创建时,helloForm.属性名并未声明,因此Vue就无法对属性执行 getter/setter 转化过程,导致helloForm属性不是响应式的,因此无法触发视图更新。解决的方式有两种,第一种就是显示的声明helloForm这个对象的属性,如:

export default {
  name: ‘helloFormDemo‘,
  data () {
    return {
      helloForm: {
          name: ‘‘,
          description: ‘‘
      }
    }
  }
}

其次也可以使用使用Vue的全局API: $set()赋值:

export default {
  methods: {
    handleEditHelloForm () {
        // 模拟编辑功能需要数据回显
        this.$set(this.helloForm, ‘name‘, ‘我是name‘)
          this.$set(this.helloForm, ‘description‘, ‘我是一大段描述,此处省略很多字‘)
    }
  }
}

转载自:CSDN 聽見下雨的聲音原文地址:https://blog.csdn.net/qq_22174779/article/details/99673531

原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12408588.html

时间: 2024-10-09 17:08:59

解决:Vue中给input框手动赋值,视图却不更新的相关文章

vue中让input框自动聚焦

created(){ this.changfouce(); }, methods: { //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中, //因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作是徒劳的,所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中. changfouce(){ this.$nextTick((x)=>{ //正确写法 this.$refs.inpu

解决scrollView中嵌套编辑框导致不能上下滑动的问题

EditText设置maxLines之后,文本行数超过maxLines,会网上折叠,上下滑动可以浏览所有文本. 若EditText外层有scrollView,在EditText上下滑动,不会像正常情况那样上,只会滑动了scrollView. 解决办法是: mEt_content.setOnTouchListener(this); // 解决scrollView中嵌套EditText导致不能上下滑动的问题 @Override public boolean onTouch(View v, Motio

iscroll中使用input框的话是导致无法选中input框

在使用iscroll的移动端的时候如果在iscroll中使用input框的话是导致无法选中input框 原因:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了. iscroll.js源码: onBeforeScrollStart: function (e) { e.preventDefault(); }, 更改: onBeforeScrollStart: function (e) { var target = e.target; while (

Vue中ajax返回的结果赋值

这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, created:function(){ $.ajax({ url:'', data:'', dataType:'json', success:function(res){ this.msg = res.data; } }) } }) 原因在于在ajax的success函数中,this的指向不再是vue的实例

解决vue中BMap未定义问题

原文链接: 点我 最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map引用BMap存在的问题:\color{red}{存在的问题:}存在的问题::使用BMap可以修改起始点和终点的图标,但是地图需要刷新页面才会显示.针对以上问题,问题的实现如下所示: Vue文件中的代码 <template> <div id="myMap"></div> </template> import qs from "

解决vue中对象属性改变视图不更新的问题

在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新 第二种情况是改变了对象的某一项,但是其他依赖这个数据的视图没更新 第一种情况是因为直接通过索引去改变数组,vue 对象监听不到他的变化 所以没有更新. ----解决方法  1. Vue.set(example1.items[0], { childMsg: 'Changed!'}) 2.使用

解决vue中无法取得methods方法中的return值

如果在vue的methods中去return出来一个值, 然后发现调用这个方法的时候, 并不能获取到, 得到的是undefined... 解决方法是使用callback回调函数. 举个栗子:   这个样子获取到的结果是undefined 正确写法: 原文地址:https://www.cnblogs.com/betty-niu/p/12027585.html

vue中控制input获取焦点

遇到一个任务需要实现直接点击内容来编辑,光标离开Input就保存内容 点击内容实现下面这种获取点击表格内input光标 我找了下,有ref和自定义指令两种,我选了比较适合的ref来操作 ref在循环外和循环中被获取到的是两种状态,当有多个ref相同时,通过this.$refs.ref获取循环外的ref只会获取到最后一个元素,在循环中会获取到所有相同ref元素的数组. 所以我给了所有input相同的ref再通过点击使用index来使目标input获取焦点:this.$refs.ref[index]

Vue中-下拉框可以选择可以填写

<el-form-item label="方法名称"> <el-autocomplete popper-class="my-autocomplete" v-model="customForm.MethodName" :fetch-suggestions="querySearchMethod" placeholder="请输入方法名称" :disabled="IsDisabled&