vue中data里面的数据相互使用方式

目录
  • data里面的数据相互使用
    • 具体代码如下
  • data里的数据不能相互引用问题

data里面的数据相互使用

今天在写代码的时候，遇到一个问题，我想使用data里面的一个对象使用data里面的某个数据，附图片：

我想让active的值给params对象里面的topicListType使用，我不想直接在一个方法里面改变这个值（想改的话就直接可以改了，太简单），所以就有了这个想法。

在data里面使用，但是肯定不能写成 this.params.topicListType: this.active,这样会报错undefined，从网上查内容基本上都一样，也许是我看不懂，也许是我不会使用别人的，都不能用，我就自己鼓捣一会，他们使用的是mounted，但是我觉得得使用computed。

具体代码如下

computed: {
  computedTabsActive() {
    return this.params.topicListType = this.active;
  },
},

这样就可以了，自己亲测有效，在vue中，computed的属性可以被视为是data一样，是可以读取和设值的，所以你可以直接赋值，返回。

但是很重要的一点，必须在模板中使用。摁，在模板中不让看见的话，我想大家都会把，用v-show或者v-if都可以。也算是投机取巧把。

data里的数据不能相互引用问题

如下图所示

如果需要相互引用，需要使用computed

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中如何初始化data数据

    目录 如何初始化data数据 vue程序初始化流程 初始化 改写的原因 流程实现 源码流程 初始化流程 如何初始化data数据 后台管理系统中,新建和编辑使用同一个页面,常常需要初始化data数据. form: { id: 0, name: '', place: '', number: '', admin_uid: '', is_audit: 2, contact: '', sort: '', is_network: 2, network_type: 1, is_projector: 2, is

  • vue前端测试开发watch监听data的数据变化

    vue前端测试开发watch监听data的数据变化

    目录 watch监听data的数据变化 新问题 解决 1. 先把姓名的值,也加到options里 2. 在监听里增加for循环和判断 watch监听data的数据变化 上一篇里提到了用elementUI的select实现了个远程搜索的功能,最终效果是这样的. 但是继续开发的时候,又遇到了一个新的问题,跟上面的功能有关. 先看下远程搜索的操作,与data里的数据关系. 当输入“张”进行搜索,看到的下拉列表里展示的结果都是存放在data的options: []. 当我选择了一个,比如“张三”,因为s

  • Vue如何在CSS中使用data定义的数据浅析

    Vue如何在CSS中使用data定义的数据浅析

    1.考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2.使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性 <template> <div> <div class="box" :data-content="obj.desc"

  • vue项目中data数据之间互相访问的实现

    vue项目中data数据之间互相访问的实现

    如下代码: <div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, tex

  • Vue发送Formdata数据及NodeJS接收方式

    Vue发送Formdata数据及NodeJS接收方式

    目录 Vue发送Formdata数据 NodeJS后台接收 查看FormData里的值 Vue发送Formdata数据 参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的. 具体使用方法,参考此链接地址 // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop(blob) { const formData = new FormData(); let uid = this.$store.getter

  • vue中data里面的数据相互使用方式

    vue中data里面的数据相互使用方式

    目录 data里面的数据相互使用 具体代码如下 data里的数据不能相互引用问题 data里面的数据相互使用 今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片: 我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改的话就直接可以改了,太简单),所以就有了这个想法. 在data里面使用,但是肯定不能写成 this.params.topicListType: this.active,这

  • vue中data的基础汇总

    vue中data的基础汇总

    目录 vue中如何重置data 组件中的data为什么是一个函数 为什么new Vue里的data可以是一个对象 vue中如何重置data 重置data需要了解3个小知识点 (1)this.$data获取组件当前状态的data对象 (2)this.$options.data获取组件初始状态的data对象 (3)Object.assign()方法用于将所有可美剧属性的值从一个或者多个源对象复制到目标对象,并返回目标对象. Object.assign(target,source1,source2,.

  • 详解vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

  • vue中data改变后让视图同步更新的方法

    vue中data改变后让视图同步更新的方法

    前言 不久前天看到一个比较有趣的问题,vue中data改变后,如何让视图同步更新,搜索了一下,并没有发现解决问题的方法,只能从源码去找解决方法了. 原因 我们都知道,在vue中改变数据后,视图并不是同步更新的. 在vue实例初始化后,会将data设置为响应式对象,当我们执行this.xxx = 1时,会触发这个响应式对象的setter.在setter中,会触发更新,通知所有订阅了xxx的订阅者.但是这个触发更新并不是同步的,它会将所有的watcher都添加到一个队列,并在nextTick之后去更

  • vue中data和data()的区别说明

    vue中data和data()的区别说明

    目录 data和data()的区别 Vue实例中data属性 组件化的项目中使用 详解vue.js中的data 文档之一 文档之二 文档之三 文档之四 data和data()的区别 Vue实例中data属性 new Vue({   el: '#app',   data: {     message: 'message'   } }) 组件化的项目中使用 export default{     data(){         return {            message: 'messag

  • 简单聊一聊vue中data的代理和监听

    目录 假设现在有一个data 需求一: 用 Object.defineProperty 定义 n 需求二:n不能小于0 所以就有了需求三:不暴露data中可以设置的属性,而是使用一个代理 因此引出了需求四:就算用户擅自修改myData,也要进行拦截 总结 接下来通过几个需求的完成来一步步看看data中的代理和监听是怎么样的 假设现在有一个data let data0 = { n:0 } 需求一: 用 Object.defineProperty 定义 n let data1 = {} Object

  • vue中for循环更改数据的实例代码(数据变化但页面数据未变）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl

  • vue中实现先请求数据再渲染dom分享

    在项目中遇到了一个问题,下面是vue template中的代码: 我之前的写法是 这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到. 原因是并没有按照 请求数据->渲染dom->获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么) 后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是

  • 解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

    前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做

  • 实现vuex与组件data之间的数据同步更新方式

    问题 我们都知道,在Vue组件中,data部分的数据与视图之间是可以同步更新的,假如我们更新了data中的数据,那么视图上的数据就会被同步更新,这就是Vue所谓的数据驱动视图思想. 当我们使用Vuex时,我们也可以通过在视图上通过 $store.state.[DataKey] 来获取Vuex中 state 的数据,且当 state 中的数据发生变化时,视图上的数据也是可以同步更新的,这似乎看起来很顺利. 但是当我们想要通过将 state 中的数据绑定到Vue组件的 data 上,然后再在视图上去

随机推荐