问答

vue的data()中的值能否递归调用

作者:admin 2021-05-11 我要评论

理想的效果是: 标题一??????????????????内容一 标题二??????????????????内容二 标题三??????????????????内容三 实际上的效果是: 标题一??????????????????t...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

理想的效果是:

标题一??????????????????内容一
标题二??????????????????内容二
标题三??????????????????内容三

实际上的效果是:

标题一??????????????????this.details.c1
标题二??????????????????this.details.c2
标题三??????????????????this.details.c3
<template>
    <div>
        <van-cell-group>
            <van-cell
                v-for="(item, index) in d_list"
                :key="index"
                :title='item.title'
                :value="item.value"/>
        </van-cell-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                details: {
                    c1: '内容一',
                    c2: '内容二',
                    c3: '内容三',
                },
                d_list: [
                    {
                        title: '标题一',
                        value: 'this.details.c1',
                    }, {
                        title: '标题二',
                        value: 'this.details.c2',
                    }, {
                        title: '标题三',
                        value: 'this.details.c3',
                    }
                ],
            }
        },
    }
</script>

上面的details{}是从后台传过来的对象,能不能在不改变details{}的情况下,在html中循环输出details{}中的属性值和另外自己定义的title吗

###

亲测有效!

<template>
    <div>
        <van-cell-group>
            <van-cell
                v-for="(item, index) in d_list"
                :key="index"
                :title='item.title'
                :value="details[item.value]"/>
        </van-cell-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                details: {
                    c1: '内容一',
                    c2: '内容二',
                    c3: '内容三',
                },
                d_list: [
                    {
                        title: '标题一',
                        value: 'c1',
                    }, {
                        title: '标题二',
                        value: 'c2',
                    }, {
                        title: '标题三',
                        value: 'c3',
                    }
                ],
            }
        },
    }
</script>
###
d_list: [
                    {
                        title: '标题一',
                        value: this.details.c1,
                    }, {
                        title: '标题二',
                        value: this.details.c2,
                    }, {
                        title: '标题三',
                        value: this.details.c3,
                    }
                ],

不应该是这样?加''不是变成字符串了;还是我没理解对;
或者你在create 方法里遍历下d_list,把details写进去;

###

可以引入 lodash ,并使用其 .get方法(需要把开头的 this. 处理掉);
可以用eval函数;
有耐心的话,自己解析字符串也是可以的嘛。

但是感觉怪怪的。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue的data()中的值能否递归调用

    vue的data()中的值能否递归调用

  • nginx+ngrok https问题

    nginx+ngrok https问题

  • 微信小程序上拉加载更多如何有淡入效果

    微信小程序上拉加载更多如何有淡入效果

  • vite 动态导入怎么配置?

    vite 动态导入怎么配置?

腾讯云代理商
海外云服务器