Question

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

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
        }
    }
});

Answer 1

你的问题是分隔符。

您指定${...}作为分隔符：

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

但语法${...}在模板字符串中具有特殊含义。

所以下面模板中的${value.name}实际上是在拾取一个value全局变量（不存在）：

var filter = Vue.component('property-filter', {
    template: `
        ...
        <a class="uk-button uk-button-default uk-button-large purple-btn">${value.name}</a>
        ...
    `, //                                                  -------------- ^^^^^^^^^^^^^

解决方案只是更改分隔符。

示例（使用@{...}）：

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

var filter = Vue.component('property-filter', {
    template: `
        ...
        <a class="uk-button uk-button-default uk-button-large purple-btn">@{value.name}</a>
        ...
    `,

演示：

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
        }
    }
});

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Click 'sales'.
  <property-filter></property-filter>
</div>

组件模板中的v-for

1 个答案: