Vuejs2 组件模板内的v-for

我试图在vue组件的模板中循环一组对象，但它一直说for循环值没有定义，我不知道为什么，如果我输出了其他值，那么它将循环正确的次数，这意味着它必须访问数组ok，但是如果我尝试在循环中输出该键，它将说undefined

Vue.options.delimiters = ['${', '}'];

window.search = {
    selected : 'all',
    salePrices : [
        {
            name: 'any price',
            minValue: 0,
            maxValue: 99999999999,
            selected: true
        },
        {
            name: '£50k - 200k',
            minValue: 50000,
            maxValue: 200000,
            selected: false
        },
        {
            name: '£200k - £400k',
            minValue: 200000,
            maxValue: 400000,
            selected: false
        },
        {
            name: '£600k - £800k',
            minValue: 600000,
            maxValue: 800000,
            selected: false
        },
        {
            name: '£800k +',
            minValue: 800000,
            maxValue: 9999999999999,
            selected: false
        }
    ]
}

var filter = Vue.component('property-filter', {
    template: `
        <div class="filter-container">
            <div class="type-sort">
                <a href="" @click.prevent="search.selected = 'sales'" class='uk-button uk-button-default uk-button-large purple-btn main-btn' 
                    v-bind:class="{ selected : search.selected == 'sales' }"
                >sales</a>
                <a href="" @click.prevent="search.selected='lettings'" class='uk-button uk-button-default uk-button-large purple-btn main-btn'
                    v-bind:class="{ selected : search.selected == 'lettings' }"
                >lettings</a>
                <a href="" @click.prevent="search.selected='openViewings'" class='uk-button uk-button-default uk-button-large purple-btn main-btn'
                    v-bind:class="{ selected : search.selected == 'openViewings' }"
                >open viewings</a>
            </div>
            <div class="sales-price-sort" v-if="search.selected == 'sales'">
                <div v-for="(value, key) in search.salePrices" :key="key">
                    <a class="uk-button uk-button-default uk-button-large purple-btn">${value.name}</a>
                </div>
            </div>
        </div>
    `,
    methods: {

    },
    data: function(){
        return {
            key: '',
            search: window.search
        }
    }
});

Vue.options.delimiters=['${'，'}']；
window.search={
已选择：“全部”，
销售价格：[
{
名称：“任何价格”，
最小值：0，
最大值：999999999，
所选：真
},
{
名称：“5万至20万英镑”，
最小值：50000，
最大值：200000，
所选：false
},
{
名称：“20万英镑-40万英镑”，
最小值：200000，
最大值：400000，
所选：false
},
{
名称：“60万英镑-80万英镑”，
最小值：600000，
最大值：800000，
所选：false
},
{
名称：800k英镑以上，
最小值：800000，
最大值：99999999999，
所选：false
}
]
}
var filter=Vue.component（'property-filter'{
模板：`
${value.name}
`,
方法：{
},
数据：函数（）{
返回{
键：“”，
搜索：window.search
}
}
});

您的问题是分隔符

指定

${…}

作为分隔符：

Vue.options.delimiters=['${'，'}']；

但是语法

${…}

在模板字符串中有特殊意义

因此，下面模板中的

${value.name}

实际上正在拾取一个

值

全局变量（该变量不存在）：

var filter=Vue.component（'property-filter'{
模板：`
...
@{value.name}
`,
方法：{
},
数据：函数（）{
返回{
键：“”，
搜索：window.search
}
}
});
新Vue({
el:“#应用程序”
})

单击“销售”。

我还不知道为什么会发生这种情况。但首先，当在数据中使用它时，您应该

window.search

。另外，编辑搜索也将编辑window.search。使用lodash，

search:\uuux.cloneDeep（window.search）