如何在组件中创建没有 v-bind 的 v-for答案

【问题标题】：How to create a v-for without v-bind in a component如何在组件中创建没有 v-bind 的 v-for
【发布时间】：2020-04-18 06:25:37
【问题描述】：

所以我使用 php 作为后端，使用 Vue 作为前端。我目前正在使用 scandir() 在我的 php 中读取模拟文件夹。我取回了一个 JSON 对象，并且能够在 Vue 组件的前端检索它。但是，我无法在 Vue 中成功循环该对象。

这是我的 php，它只读取数组中作为文件夹的项目：

    $campaigns = "./";
    $scanned_directory = array_diff(scandir($campaigns), array('..', '.', 'scandir.php', 
    '.DS_Store'));
    print_r(json_encode($scanned_directory));

这给了我：

{"3":"191127_ad_review","4":"191216_new_year","5":"191216_winter_sale"}

这是我挂载信息的 vue 组件：

    mounted() {
    this.getCampaigns()
    },
    methods: {
    getCampaigns() {
        this.axios.get('http://localhost/AdReviewBack/clients/clientABC/scandir.php')

        .then(response => {
            this.campaigns = response.data
            console.log(this.campaigns)
            }
        )

    }
    }

在我的控制台日志中显示：

    {__ob__: Observer}
    3: "191127_ad_review"
    4: "191216_new_year"
    5: "191216_winter_sale"
    __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
    get 3: ƒ reactiveGetter()
    set 3: ƒ reactiveSetter(newVal)
    get 4: ƒ reactiveGetter()
    set 4: ƒ reactiveSetter(newVal)
    get 5: ƒ reactiveGetter()
    set 5: ƒ reactiveSetter(newVal)
    __proto__: Object

我可以渲染 {{ this.campaigns }} 以显示来自我的 php 的相同响应，如下所示：

{“3”：“191127_ad_review”，“4”：“191216_new_year”，“5”：“191216_winter_sale”}

我的问题是我不知道我会使用什么作为我的 v-bind:key。是数字3、4、5吗？如果是这样，我将如何绑定动态的东西？有没有办法在不使用 v-bind:key 的情况下使用 v-for？我的 Vue 版本不允许。

我希望我的 v-for 像这样工作：

    <li v-for="campaign in campaigns">
        {{ this.campaign }}

但是，如果没有绑定并添加我尝试过的任何键（索引、ID、活动），这将不起作用，即使我在数据中将其添加为空字符串，我也会收到错误“活动未定义”。

任何提示将不胜感激！

【问题讨论】：

标签： php vue.js vue-component v-for scandir

【解决方案1】：

我错过了 5 个小时！写完整个问题后，我一提交问题就发现了问题。

    {{ campaign }}

不是：{{ this.campaign }}

希望我的错误对其他人有所帮助！

【讨论】：