Question

我有一个网站，该网站使用Vue.js内置的过滤系统，它使用“州”，“城市”和“类型”过滤属性，代码看起来像这样，它适用于州和类型，但不适用于城市它们来自对象而不是数组。我不确定如何在对象内部访问值。

<div class="grid-x grid-margin-x">
    <div class="cell medium-auto">
        <label for="property-state">STATE</label>
        <select name="property-state" @change="search()" id="property-state">
            <option value="">Select</option>
            <option v-for="val in terms['property-state']" :value="val.id">{{ val.name }}</option>
        </select>
    </div>
    <div class="cell medium-auto">
        <label for="city">CITY</label>
        <select name="city" @change="search()" id="city">
            <option value="">Select</option>
            <option v-for="val in terms ['location']" :value="val.id">{{ val.city }}</option>
        </select>
    </div>
    <div class="cell medium-auto" @change="search()">
        <label for="property-type">PROPERTY TYPE</label>
        <select name="property-type" id="property-type">
            <option value="">All types</option>
            <option v-for="val in terms['property-type']" :value="val.id">{{ val.name }}</option>
        </select>
    </div>
</div>

我知道我正在尝试访问“位置”，就好像它是一个数组一样，但是由于如上图所示它是一个对象，因此不确定如何进行操作。

我要访问的数据的结构如下：

location (Object)

   |

   city: "cityName"

Answer 1

在Vue中，v-for以相同的方式处理对象和数组。数组具有相同类型的值，但是对象的结构可能不同。使用计算的属性将您的城市名称保存到数组中。

https://vuejs.org/v2/guide/list.html#v-for-with-an-Object

使用Vue.js进行过滤，获取对象的值

1 个答案: