Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?

示例:

<template>
<div>
<ul>
<li v-for="value in obj" :key="value">
{{value}}
</li>
</ul>
<button @click="addObjB">添加obj.b</button>
</div>
</template>
<script>
export default{
data () {
return {
obj: {
a: 'obj.a'
}
}
},
methods: {
addObjB () {
this.obj.b = 'obj.b'
console.log(this.obj)
}
}
}
</script>
<style></style>

点击button会发现, obj.b 已经成功添加,但是视图并未刷新:

 
原因在于在Vue实例创建时, obj.b 并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api—— $set():
addObjB () {
// this.obj.b = 'obj.b'
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
}

$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性,此时视图也会跟着改变了:

 

vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)的更多相关文章

  1. vue data对象添加新属性触发视图

    <template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...

  2. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  3. javascript已存在的对象构造器中是不能添加新的属性的:

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程 ...

  4. vue中改变数组或对象,页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

  5. Vue中,给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

  6. ASP.NET MVC系列:为已有模型添加新的属性

    在模型类Movie中添加一个新的属性Rating

  7. vue中组件的data为什么是一个函数

    1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...

  8. Vue中可用的判断对象是否为空的方法

    vue有两个方法可用 1. JSON.stringify(evtValue)=='{}' 2. Object.keys(xxx).length==0 js判断对象是否为空对象的几种方法 1.将json ...

  9. Vue实例的的data对象

    介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数 ...

随机推荐

  1. SE篇

    1. List 和 Set 区别       List 特点:元素有放入顺序,元素可重复     Set 特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉   2. List 和 Map 区别   ...

  2. Linux安装Tomcat,解决不能访问Manager App

      在Windows环境中安装Tomcat时,只需要在Tomcat目录下/conf/tomcat-user.xml文件增加用户就可以了.在Linux系统中添加了username还是不能访问. 一.Li ...

  3. 录入规则文件名到CSV文件

    import os import sys import csv # 导出到csv文件 def export_to_csv(datas): with open('export.csv', 'w', ne ...

  4. wpf 程序启动显示图片

    一.设置图片的生成操作 程序启动时会出现0.5秒的图片显示,再显示程序界面. 二.写代码实现相同效果 /// <summary> /// App.xaml 的交互逻辑 /// </s ...

  5. Spring作用域和BeenFactory

    1.Spring Bean实例作用域: ① singleton:   IOC容器仅创建一个Bean实例,IOC容器每次返回的是同一个Bean实例. ② prototype:   IOC容器可以创建多个 ...

  6. Hog实例

    1.计算Hog的特征得维度: #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2 ...

  7. markdown文本编辑学习笔记2

    目录 1.删除线 2.无序列表 4 todo list 5分割符号 6 TOC自动生成目录 7 插入代码块 8 斜体.粗体.删除线.下划线.背景高亮 markdown编辑公式 1.删除线 ~~要删除的 ...

  8. Execl导入系统

    文件导入功能 前台代码: Content\JS\jquery.ajaxfileupload.js<script src="~/Content/JS/jquery.ajaxfileupl ...

  9. [JSOI2016]最佳团体 DFS序/树形DP

    题目 洛谷 P4322 [JSOI2016]最佳团体 Description 茜茜的舞蹈团队一共有\(N\)名候选人,这些候选人从\(1\)到\(N\)编号.方便起见,茜茜的编号是\(0\)号.每个候 ...

  10. (转)数据索引BTree

    .B-tree 转自:http://blog.csdn.net/hbhhww/article/details/8206846 B-tree又叫平衡多路查找树.一棵m阶的B-tree (m叉树)的特性如 ...