vue data有值,但是页面{{}} 取不到值的解决
我的问题出在js引入的顺序不对，导致不能正常显示vue中的值
正确的顺序应该是：
先引入vue的js--------html代码-----最后引入自己写的js
补充知识：vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
父子组件通信
这个很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可 。
例如：在父组件中
<template> <div> <div :Data="Data"></div> </div> </template>
<script>
data(){
return {
Data: [10,20,30]
}
},
</script>
子组件中：
export default{
props:{
type:Array,
default(){
return []
}
}
}
这种情况下你的Data值是固定的，子组件的 methods 中想要取到props中的值，直接使用 this.chartData 即可 。
但是有的情况下，你的Data 里面的值并不是固定的，而是动态获取的，这种情况下，你会发现 methods 中是取不到你的 Data 的，或者取到的一直是默认值。
解决办法：
这种情况我是使用watch处理
监听 Data 的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在 watch 里面执行。
export default {
props: ['Data'],
data(){
return {
cData: []
}
},
watch: {
//正确给 Data 赋值的 方法
chartData: function(newVal,oldVal){
this.cData = newVal; //newVal即是chartData
newVa l&& this.draw(); //newVal存在的话执行draw函数
}
},
methods: {
draw(){
//执行其他逻辑
}
},
mounted() {
//在created、mounted这样的生命周期, 给 this.Data赋值会失败,错误赋值方法
}
}
//总结
出现这种情况的原因, 因为父组件中要传递的 props 属性 是通过 发生ajax请求回来的, 请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时 created 、 mounted 这样的只会执行一次的生命周期钩子，已经执行了，但是 props 还没有流进来（子组件），所以只能拿到默认值。
以上这篇vue data有值,但是页面{{}} 取不到值的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t
-
浅谈vue在html中出现{{}}的原因及解决方式
原因: 浏览器渲染机制,解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕. 初始化vue的js写在页面底部,也就是最后才执行js脚本. 所以页面从头到尾开始渲染时,渲染到标签时,由于vue还未初始化,所以就会显示类似这样的代码 <h2>{{courseName}}</h2> 当网速很慢的时候就看得比较清楚,可能会让用户误以为bug之类的,快一点的话就
-
vue 防止页面加载时看到花括号的解决操作
如下所示: <style> [v-cloak]{ display:none } </style> v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理 补充知识:vue花括号数据绑定不成功的问题 我就废话不多说了,大家还是直接看案例吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" />
-
解决Vue大括号字符换行踩的坑
最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示. 在HTML中可以通过<br/>标签换行,也可以通过\n转义字符换行 在Vue中用大括号显示的变量,加<br/>会直接被当成字符串显示出来,加\n显示一个空格,加\r\n显示两个空格,因为{{}}}是文本插值,内部都会按照普通字符串进行处理,可以用v-html进行显示 如下显示name变量 data() { return{ name: '前一部分<br/>后一部分' } } 在元素上显示
-
vue data有值,但是页面{{}} 取不到值的解决
我的问题出在js引入的顺序不对,导致不能正常显示vue中的值 正确的顺序应该是: 先引入vue的js--------html代码-----最后引入自己写的js 补充知识:vue中子组件的created.mounted生命周期钩子中获取不到props中的值问题 父子组件通信 这个很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 . 例如:在父组件中 <template> <div> <div :Data="Data"></d
-
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错:Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’). 百度了很多办法都说是因为在vue3中引入了elementUi,vue3.0之后是不支持elementUi的,要使用element plus,但是因为我想用若依偷懒,所以必须得用elementUi,很多文章说是vue - V命令查看vu
-
vue修改对象的属性值后页面不重新渲染的实例
最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="
-
微信小程序实现同一页面取值的方法分析
本文实例讲述了微信小程序实现同一页面取值的方法.分享给大家供大家参考,具体如下: 1.js里单个的值在wxml里取值方法:js里将该值定义为全局变量,在wxml里采用 {{ }}即可获取. 实例: js里得值: data{ schoolName:"清华大学" } wxml里获取: <view class="texts">{{schoolName}}</view> 2.js里数组或是集合在wxml里的取值方法:js里将该集合或数组定义为全局变量
-
微信小程序页面间传值与页面取值操作实例分析
本文实例讲述了微信小程序页面间传值与页面取值操作.分享给大家供大家参考,具体如下: 微信小程序页面间传值 1.js页面间的传值:url: ' 路径 ? 值='+ 获取该页面取值, 实例1: pageSkip :function(){ wx.navigateTo({ url: '/page/login/facte?shopsName='+this.data.shopsName, }) }, 实例2: pageSkip :function(){ wx.navigateTo({ url: '/page
-
SpringSecurity页面授权与登录验证实现(内存取值与数据库取值)
目录 SpringSecurity? 一.导入依赖 二.配置yml文件 三.代码部分 DAO层(注意@Repository与@Mapper注解) Service层(注意@Service注解) Controller层(注意@Controller注解) POJO Utils 资源目录结构 运行效果 SpringSecurity? Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean
-
vue遍历对象中的数组取值示例
前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=
-
vue实现导航标题栏随页面滚动渐隐渐显效果
项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的,下面作一个用vue实现此功能的代码分享. 1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle". <div class="header" :style="opacityStyle"> 景点详情 //内容我就简约了,实际开发以需求为准 </div> 2. data中定义opacityStyle,数据内容是opacity透明度属性,
-
vue data中的return使用方法示例
目录 一.vue 里面的data return 是什么? 二.如何使用 1.vue 双向绑定 v-model 2.带有 ":"的属性 比如:class.:id等等 3. 标签使用return里面的属性 补充:vue中的data为什么会使用return函数 总结 一.vue 里面的data return 是什么? uniapp项目 vue 结构中data 里面的return详解 从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去. 二.如何使用
-
详解基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的