精华内容
下载资源
问答
  • set vue 多个值
    2021-11-04 17:47:02

    ##改变数组对象内的值
    this.$set(this.list, index, { …this.list[index], isShow: show })
    这样可以做到实时监听的效果!

    更多相关内容
  • 注:computed多个值单独已用计算时,会报错,Vue computed 报错:Computed property was assigned to but it has no setter 解决办法就是 换一种写法,组件中定义的computed属性缺少setter,使用过computed 都应该...

    需求:computed计算属性的应用一般会是几个互不影响的值计算,本次需求是多个值互相引用计算

    效果图
    在这里插入图片描述

    注:computed多个值单独已用计算时,会报错,Vue computed 报错:Computed property was assigned to but it has no setter 解决办法就是 换一种写法,组件中定义的computed属性缺少setter,使用过computed 都应该知道,该错误提示通常发生在组件内为computed属性赋值的时候,如果没有显示的声明setter,控制台则会打印如上错误。那么顺着这个方向,继续排查错误,其次检查代码中是否有给num进行赋值,第一次检查,好像整个代码逻辑从未操作过num属性,怎么会涉及到给num赋值呢? 不管怎么疑惑,错误的确发生了。继续定位对num属性的操作,直到我看到v-model=“num”。现在一切都解释得通了,正是v-model的双向绑定属性实现了对num 的赋值。解决办法通过上面的分析,错误及原因已经找到,怎么解决就比较简单了,只需在声明computed属性时显示的声明setter即可。

    这种错误解决办法:https://blog.csdn.net/weixin_44670973/article/details/109074967

    sumZongji() {
            return (
              Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
            )
          },
    

    完整代码:

    data(){
    return{
          params: {
              jiaozhong: '',
              radio: '原稿',
              booknames: '',
              jiaozhong: '',
              daji: '',
            },
    }
    }
    //计算属性
    computed:{
     sumZongji() {
            return (
              Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
            )
          },
          zhengji: {
            get() {
              return (
                parseFloat(this.params.zhengzhong) +
                1 -
                parseFloat(this.params.zhengshi)
              )
            },
            set(s) {},
          },
          daji: {
            get() {
              return (
                parseFloat(this.params.dazhong) + 1 - parseFloat(this.params.dashi)
              )
            },
            set(v) {},
          },
    
    }
    //页面Dom
    <el-row>
                <el-col :span="12">
                  <el-form-item label="正始:">
                    <el-input
                      v-model="params.zhengshi"
                      name="正始"
                      type="number"
                      placeholder="请输入"
                      min="1"
                      max="1000"
                      oninput="value=value.replace(/[^\d]/g,0)"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="正终:">
                    <el-input
                      v-model="params.zhengzhong"
                      name="正终"
                      placeholder="请输入"
                      type="number"
                      min="1"
                      max="1000"
                      oninput="value=value.replace(/[^\d]/g,0)"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="答始:">
                    <el-input
                      v-model="params.dashi"
                      name="答始"
                      placeholder="请输入"
                      type="number"
                      min="1"
                      max="1000"
                      oninput="value=value.replace(/[^\d]/g,0)"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="答终:">
                    <el-input
                      v-model="params.dazhong"
                      name="答终"
                      placeholder="请输入"
                      type="number"
                      min="1"
                      max="1000"
                      oninput="value=value.replace(/[^\d]/g,0)"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="答题纸:">
                    <el-input
                      v-model="params.datizhi"
                      name="答题纸"
                      placeholder="请输入"
                      type="number"
                      min="1"
                      max="1000"
                      oninput="value=value.replace(/[^\d]/g,0)"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div
              v-if="
                params.jiaozhong != '核红' &&
                params.jiaozhong != '其他' &&
                params.jiaozhong != '分项检查'
              "
              class="yeshu"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="页数:"></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="9">
                  <el-form-item label="正计:">
                    <el-input
                      v-model="zhengji"
                      disabled
                      type="number"
                      name="正计"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="答计:" label-width="50px">
                    <el-input
                      v-model="daji"
                      type="number"
                      disabled
                      name="答计"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="总计:" label-width="50px">
                    <el-input
                      v-model="sumZongji"
                      type="number"
                      disabled
                      name="总计"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
    
    展开全文
  • 换句话说,就是可以自己设置值(b值),这个值和data下定义的值(a值)存在某些关系,b的值是基于a的值,通过某些逻辑产生出来的值,b值可以直接拿到template里去用。当a的值发生变化的时候,b的值会跟着变化。就是...
  • 特地写一篇博客记录一下,方便以后再遇到可以查找,也分享各位小伙伴,在网上查找很资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋值和$set方法我都试了,前台属性改变但是视图并...
  • 谈到Vue.set就要说响应式原理,所以得为你自己准备下这方面的理论知识。然而,一如即往,这并不难或者枯燥。准备点鳄梨和薯条,制作些鳄梨酱,然后我们再进入话题。 数据和响应式原理 在一个Vue组件中,无论你何时...
  • 今天小编就为大家分享一篇vue修改对象的属性后页面不重新渲染的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue使用this.$set动态添加属性

    千次阅读 2022-04-07 16:03:07
    如果不是使用this.$set动态添加属性,这属性是可以添加上,但是不会作为响应式数据,也就是不会重新解析模板。

    注意:如果不是使用this.$set动态添加属性值,这个属性值是可以添加上,但是不会作为响应式数据,也就是不会重新解析模板。

    下面以例子来说明:

    1、直接用this.propertyName添加属性(错误的写法)

    App.vue

    <template>
        <div>
             <img v-show="dataObj.isShowImg" src="./assets/logo.png"/>
             <hr>
             <button @click="showImage">点击切换显示图片</button>
        </div>
    </template>
    
    <script>
    
    export default {
        name: "App",
        data: function(){
            return {
                dataObj: {
                    name: "dataObj"
                }
            }
        },
        methods:{
            showImage: function(){
                this.dataObj.isShowImg = !this.dataObj.isShowImg;
                console.log(this)
            }
        }
    }
    </script>

    效果如下图:

    点击切换图片显示按钮,图片出不来!

    通过控制台输出的组件实例对象,可以看出 isShowImg属性已经添加上,但是没有get和set方法!

    2、使用this.$set动态添加属性值(正确)

    App.vue

    <template>
        <div>
             <img v-show="dataObj.isShowImg" src="./assets/logo.png"/>
             <hr>
             <button @click="showImage">点击切换显示图片</button>
        </div>
    </template>
    
    <script>
    
    export default {
        name: "App",
        data: function(){
            return {
                dataObj: {
                    name: "dataObj"
                }
            }
        },
        methods:{
            showImage: function(){
                let isShowImg = !this.dataObj.isShowImg;
                this.$set(this.dataObj, "isShowImg", isShowImg);
                console.log(this)
            }
        }
    }
    </script>

    效果如下图:

    点击切换按钮,可以来回切换显示图片

     

    通过控制台输出的组件实例对象,可以看出 isShowImg属性已经添加上,也有get和set方法!

    3、完美案例(通过判断对象身上有没有isShowImg属性,没有则通过this.$set动态添加,否则直接用this.propertyName修改属性值)

    App.vue

    <template>
        <div>
             <img v-show="dataObj.isShowImg" src="./assets/logo.png"/>
             <hr>
             <button @click="showImage">点击切换显示图片</button>
        </div>
    </template>
    
    <script>
    
    export default {
        name: "App",
        data: function(){
            return {
                dataObj: {
                    name: "dataObj"
                }
            }
        },
        methods:{
            showImage: function(){
                let isShowImg = !this.dataObj.isShowImg;
                if(Object.prototype.hasOwnProperty.call(this.dataObj, "isShowImg")){
                    this.dataObj.isShowImg = isShowImg;
                }else{
                    this.$set(this.dataObj, "isShowImg", isShowImg);
                }
                console.log(this)
            }
        }
    }
    </script>

    展开全文
  • <div id="app"> <div> <h3>{{person.name}}</h3>...button type="button" @click="handleAdd">...script src="../js/vue.js" type="text/javascript" charset="utf-8">&l
    <div id="app">
    			<div>
    				<h3>{{person.name}}</h3>
    				<button type="button" @click="handleAdd">添加年龄</button>
    			</div>
    		</div>
    
    		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			
    			const app = new Vue({
    				el:'#app',
    				data:{
    					person:{}
    				},
    				methods:{
    					handleAdd(){
    						this.person.name = 'ljx'
    						//通过直接添加方法无法添加
    					}
    				}
    			})
    		</script>
    

    解决办法

    const app = new Vue({
    				el:'#app',
    				data:{
    					person:{}
    				},
    				methods:{
    					handleAdd(){
    						
    						// console.log(Vue.set); \
    						//Vue.set(object,key,value)
    						//this.$set(object,key,value)
    						this.$set(this.person,'name','ljx')
    						此处注意:可通过实例使用				this.$set(object,key,value)
    									也可使用调用Vue  :		Vue.$set(object,key,value)
    					}
    				}
    			})
    

    添加多个属性方法

    
    this.person = Object.assign({},this.person,{
    							age:55,
    							height:1.99
    						})
    
    展开全文
  • vue 多个变量同时赋相同互相影响

    千次阅读 2020-04-24 17:02:59
    项目中需动态渲染一列表billItemLIsts,列表中包含n组小列表,其中小列表的state_pj用于改变该小列表中的radio,于是: <el-tabs tab-position="left" style="max-height:280px;"> <el-tab-...
  • Vue响应式添加、修改数组和对象的发布时间:2020-08-22 01:18:38来源:脚本之家阅读:80作者:jiangxiaobo有些时候,不得不想添加、修改数组和对象的,但是直接添加、修改后又失去了getter、setter。由于 ...
  • Vue——Vue set()方法

    2022-04-04 12:19:37
    Vue.set(this.student, 'sex', '男')//this指的是vm._data,也就是vm.data this.$set(this.student, 'sex', '男'), 注意: 不能直接给data添加响应式属性,也不可以给Vue实例。即下图红色框里的不可以给他们添加 //...
  • vue中$set的用法

    千次阅读 2019-07-20 10:15:21
    vue中$set的用法 $set用来更新数组或对象 $set接收3参数,第一参数是需要更新的数组或对象,第二参数是数组的下标或者对象的属性名,第三参数是更新的内容。 $set用于更新数组: //数组的第3内容更新为...
  • web前端:vue更改数组中的

    千次阅读 2020-12-24 19:04:46
    数组说明的一般形式为:类型说明符数组名[常量...vue更改数组中的根据下标更改时vm为新建的vue对象ind为数组第一e为在数组ind中e索引位置第二e为更改为evm.$set(vm.ind,e,e)常规更改arr为数组//添加arr.pu...
  • 初探Vue里$set方法

    千次阅读 2022-03-21 14:32:30
    -- $set 用法 --> <div>{{ name }}</div> <div>{{ age }}</div> <div>{{ sex }}</div> <div>{{ info.content }}</div> </div> </templat.
  • Vue 中 $set() 与 Vue.set() 原理及使用

    万次阅读 多人点赞 2020-06-14 20:29:12
    问题: 在使用 vue 进行开发的过程中,可能会遇到一种情况:当生成vue实例后,再次给数据赋值时,有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 案例: <...
  • 计算属性, 一个变量的根据其他变量(一个或者多个)的变化,自动反映,算出新的结果。 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时...
  • vue动态生成多个Echarts图表

    千次阅读 2022-03-09 11:33:06
    vue动态生成多个Echarts图表 首先先动态的获取到id <div v-for="(item,index) in chartList" :key="index"> <div :id="`chart${index}`"></div> </div> 其次获取后端返回的数据 this....
  • nginx配置多个vue项目

    千次阅读 2022-06-19 22:32:43
    nginx部署多个前端vue项目
  • 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给对象赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到...
  • vue使用element中的input组件实现传多个值和input回显强制刷新 在项目开发过程使用input遇到的小问题,直接从element拿取过来的input组件是没问题的,但是存在着如果给input的value设置默认值,再次进行操作的时候...
  • nginx 部署多个vue项目

    千次阅读 2022-03-13 23:27:48
    这里写目录标题vue项目配置.env.staging文件.env.production文件vuefig.js文件router->index.js文件nginx配置 ngxin下载后解压即可 1.vue项目配置(基于若依框架的前端项目) vue项目配置 .env.staging文件 # ...
  • 今天小编就为大家分享一篇vue 解决computed修改data数据的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.set 简单实例

    千次阅读 2020-12-14 11:22:50
    vue 的一大特性就是修改数据后, 系统能自动更新到界面上 但这一特性并不是所有情况下都能... [修改一无关 boo] 也就是说, 子组件的更新还不足以触发数组的数据更新 [直接修改 arr[0], 界面上不能自动更新] ->
  • Vue3 $set

    万次阅读 多人点赞 2021-04-09 15:19:41
    Vue2中,修改某一些数据,视图是不能及时重新渲染的。 比如数组 <div v-for="(item, index) in myHobbies" :key="index">{{ item }}</div> data: () => ({ myHobbies: ['篮球', '羽毛球', '...
  • nginx 部署多个vue前端项目

    千次阅读 2022-02-24 18:10:11
    思想:1、先反向代理 ,将多个前端项目的静态资源文件放不同位置,通过反向代理出去,可以做到用户同一个域名端口,不同路径访问不同项目, 2、再正向代理,前端访问不同后端,配置正向代理,转发到相应后端服务。 #...
  • Vue 不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕只是一空值。 如果我们需要在运行过程中实现属性的添加或删除,则可以使用全局 VueVue.setVue.delete 方法。 ...
  • 数组 itemList: [ {name: "张三", age: 18}, {name: "李四",age: 20}, {name: "王五",age: 22}, ...this.$set(this.itemList, 1, { name: '李思思', age: 30 }); 对象 person: { name: '前端劝退师' } /...
  • vue的data里边声明或者已经赋值过的对象或者数组(数组里边的是对象)时,向对象中添加新的属性,此时会更新此属性的,但是不会更新视图的。 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它...
  • 首先了解: this.$set(@param1: 数组对象, @param2: 数组对象长度, @parma3: 要修改/增加的) 接着截图例子,便可功法大成: 耶!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,011
精华内容 26,404
关键字:

set vue 多个值